Feat: Add light/dark mode styles

sandypockets · Dec 9, 2023 · a326e49 · a326e49
1 parent 137c8de
commit a326e49
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 33 deletions.
diff --git a/src/styles/darkmode.css b/src/styles/darkmode.css
@@ -19,18 +19,33 @@
 
 .dark .datepicker-day.selected,
 .dark .datepicker-day.in-range {
-  background-color: #1e8e3e;
+  background-color: #3a5fd8;
 }
 
 .dark .datepicker-day.in-range {
-  background-color: #679267;
+  background-color: #5675d8;
 }
 
 .dark .datepicker-day.blocked {
   color: #aaa;
-  background-color: #2a2a2a;
+  background-color: #1c1c1c;
+}
+
+.dark .datepicker-day-names {
+  background-color: #3a5fd8;
 }
 
 .dark .datepicker-day-names > div {
   color: #ccc;
 }
+
+.dark button.prev-month,
+.dark button.next-month {
+  background-color: #3a5fd8;
+  color: #ccc;
+}
+
+.dark button.prev-month:hover,
+.dark button.next-month:hover {
+  background-color: #2e4cae;
+}
diff --git a/src/styles/datepicker.css b/src/styles/datepicker.css
@@ -1,17 +1,32 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
 @import 'lightmode.css';
 @import 'darkmode.css';
+@import 'locales.css';
 
-.datepicker-calendar-container {
+.datepicker-input {
+  display: inline-block;
   border: 1px solid #ddd;
+  height: 20px;
+  padding: 3px 7px;
+  border-radius: 5px;
+  font-family: 'Roboto', sans-serif;
+}
+
+.datepicker-calendar-container {
   padding: 10px;
+  margin-top: 1px;
   width: 275px;
+  border-radius: 5px;
+  font-family: 'Roboto', sans-serif;
 }
 
 .datepicker-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 10px;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 0 0 10px 0;
 }
 
 .datepicker-day {
@@ -25,43 +40,31 @@
   margin: 0 0 5px 5px;
 }
 
+.datepicker-day > span {
+  display: block;
+}
+
 .datepicker-week,
 .datepicker-day-names {
   display: grid;
   grid-template-columns: repeat(7, minmax(0, 1fr));
   text-align: center;
 }
 
-.datepicker-day > span {
-  display: block;
-}
-
-.ja .datepicker-calendar-container {
-  height: 385px;
-}
-
-.ja .datepicker-day {
-  cursor: pointer;
-  height: 50px;
-  font-size: smaller;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0;
+.datepicker-day-names {
+  border-radius: 5px;
+  margin: 0 3px 5px;
+  padding: 5px 0;
 }
 
-.zh-CN .datepicker-calendar-container,
-.zh-TW .datepicker-calendar-container {
-  height: 385px;
+.datepicker-day.blocked {
+  cursor: not-allowed;
 }
 
-.zh-CN .datepicker-day,
-.zh-TW .datepicker-day {
-  cursor: pointer;
-  height: 50px;
-  font-size: smaller;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0;
+button.prev-month,
+button.next-month {
+  border-radius: 5px;
+  border: none;
+  padding: 5px 12px;
+  transition: all 100ms ease-in-out;
 }
diff --git a/src/styles/lightmode.css b/src/styles/lightmode.css
@@ -1,3 +1,10 @@
+.datepicker-calendar-container {
+  border: 1px solid #ddd;
+  padding: 10px;
+  width: 275px;
+  border-radius: 5px;
+}
+
 .datepicker-day {
   background-color: #f0f0f0;
 }
@@ -21,6 +28,15 @@
   background-color: #f8f8f8;
 }
 
+.datepicker-day-names {
+  background-color: #e0e0e0;
+}
+
 .datepicker-day-names > div {
   color: black;
 }
+
+button.prev-month:hover,
+button.next-month:hover {
+  background-color: #e0e0e0;
+}
diff --git a/src/styles/locales.css b/src/styles/locales.css
@@ -0,0 +1,29 @@
+.ja .datepicker-calendar-container {
+  height: 385px;
+}
+
+.ja .datepicker-day {
+  cursor: pointer;
+  height: 50px;
+  font-size: smaller;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}
+
+.zh-CN .datepicker-calendar-container,
+.zh-TW .datepicker-calendar-container {
+  height: 385px;
+}
+
+.zh-CN .datepicker-day,
+.zh-TW .datepicker-day {
+  cursor: pointer;
+  height: 50px;
+  font-size: smaller;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 5px;
+}