feat: dark theme css mode with toggler

excid3 · Oct 30, 2024 · d07c69d · d07c69d
1 parent a590bc4
commit d07c69d
Show file tree

Hide file tree

Showing 10 changed files with 386 additions and 21 deletions.
diff --git a/app/assets/stylesheets/madmin/application.css b/app/assets/stylesheets/madmin/application.css
@@ -8,13 +8,42 @@
 @import url("./pagination.css");
 
 :root {
+  /* common variables */
+  --sidebar-width: 16rem;
+}
+
+:root, [data-theme="light"] {
   --primary-color: rgb(37 99 235);
+  --secondary-color: rgb(249 250 251);
   --border-color: rgb(229 231 235);
   --background-color: rgb(249 250 251);
   --text-color: rgb(2 6 23);
   --light-text-color: rgb(71 85 105);
+    --mix-color: black;
+}
 
-  --sidebar-width: 16rem;
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --primary-color: rgb(129, 140, 248);
+    --secondary-color: rgb(255, 80, 217);
+    --border-color: rgb(91, 102, 121);
+    --background-color: rgb(15, 23, 42);
+    --text-color: rgb(247, 250, 252);
+    --light-text-color: rgb(140, 150, 168);
+    --mix-color: white;
+    color-scheme: dark;
+  }
+}
+
+[data-theme="dark"] {
+  --primary-color: rgb(129, 140, 248);
+  --secondary-color: rgb(255, 80, 217);
+  --border-color: rgb(91, 102, 121);
+  --background-color: rgb(15, 23, 42);
+  --text-color: rgb(247, 250, 252);
+  --light-text-color: rgb(140, 150, 168);
+  --mix-color: white;
+  color-scheme: dark;
 }
 
 body {
@@ -86,3 +115,11 @@ a {
 .scopes {
   margin-bottom: 1rem;
 }
+
+.theme-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  stroke: currentColor;
+  stroke-width: 1.5;
+  fill: none;
+}
diff --git a/app/assets/stylesheets/madmin/buttons.css b/app/assets/stylesheets/madmin/buttons.css
@@ -3,6 +3,7 @@
   display: inline-block;
   font-weight: 600;
   text-decoration: none;
+  cursor: pointer;
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -17,30 +18,48 @@
 
   &.btn-primary {
     background-color: var(--primary-color);
-    color: white;
+    color: var(--text-color);
+
+    &:hover {
+      background-color: color-mix(in oklab, var(--primary-color) 95%, black);
+    }
+
+    &.active {
+      background-color: color-mix(in oklab, var(--primary-color) 95%, black);
+    }
   }
 
   &.btn-secondary {
-    background-color: white;
-    color: rgb(31 41 55);
+    background-color: var(--secondary-color);
+    color: var(--text-color);
     box-shadow: inset 0 0 0 1px rgb(156 163 175);
 
     &:hover {
-      background-color: rgb(243 244 246);
+      background-color: color-mix(in oklab, var(--secondary-color) 95%, black);
+
     }
 
     &.active {
-      background-color: rgb(243 244 246);
+      background-color: color-mix(in oklab, var(--secondary-color) 95%, black);
     }
   }
 
   &.btn-danger {
-    background-color: white;
+    background-color: var(--background-color);
     color: rgb(239 68 68);
     box-shadow: inset 0 0 0 1px rgb(239 68 68);
 
     &:hover {
-      background-color: rgb(243 244 246);
+      background-color: color-mix(in oklab, var(--background-color) 95%, black);
+    }
+
+    &.active {
+      background-color: color-mix(in oklab, var(--background-color) 95%, black);
     }
   }
+
+  &.btn-ghost {
+    background-color: transparent;
+    color: var(--text-color);
+  }
 }
diff --git a/app/assets/stylesheets/madmin/forms.css b/app/assets/stylesheets/madmin/forms.css
@@ -35,7 +35,7 @@
 }
 
 label {
-  color: rgb(17 24 39);
+  color: var(--text-color);
   line-height: 1.5rem;
   font-weight: 500;
   font-size: 0.875rem;
@@ -58,7 +58,7 @@ button, input, optgroup, select, textarea {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  background-color: #fff;
+  background-color: var(--background-color);
 
   border-radius: 0.375rem;
   box-shadow: inset 0 0 0 1px rgb(156 163 175);
@@ -77,3 +77,136 @@ button, input, optgroup, select, textarea {
   color: rgb(239 68 68);
   font-weight: 600;
 }
+
+.nested-fields {
+  input, select, .ts-wrapper {
+    margin-bottom: 1rem;
+  }
+  img {
+    max-width: 25%;
+  }
+}
+
+/* TomSelect */
+
+.ts-wrapper {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--background-color);
+  border-radius: 0.375rem;
+  box-shadow: inset 0 0 0 1px rgb(156 163 175);
+  line-height: 1.5rem;
+  padding: .1875rem;
+
+  .ts-control, &.full .ts-control {
+    background-color: var(--background-color);
+    border: none;
+
+    input {
+      color: var(--text-color);
+    }
+
+    .item {
+      background-color: var(--background-color) !important;
+      color: var(--text-color);
+    }
+  }
+
+  &.single.input-active .ts-control {
+    background-color: var(--background-color) !important;
+  }
+
+  .ts-dropdown, .ts-dropdown-content {
+    background-color: var(--background-color);
+    color: var(--text-color);
+
+    .active {
+      background-color: var(--primary-color);
+      color: var(--text-color);
+    }
+  }
+}
+
+/* Flatpickr */
+
+.flatpickr-input {
+  width: 100%;
+}
+
+.flatpickr-calendar {
+  background-color: var(--background-color);
+  color: var(--text-color);
+
+  .flatpickr-months, .flatpickr-weekday {
+    color: var(--text-color);
+    select, input {
+      color: var(--text-color);
+    }
+    .flatpickr-prev-month, .flatpickr-next-month {
+      color: var(--text-color);
+      fill: var(--text-color);
+    }
+  }
+
+  .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
+    background-color: var(--background-color);
+  }
+
+  .flatpickr-day {
+    color: var(--text-color);
+
+    &:hover {
+      background-color: var(--primary-color);
+      color: var(--background-color);
+    }
+
+    &.selected {
+      background-color: var(--primary-color);
+      color: var(--background-color);
+    }
+
+    &.today {
+      border-color: var(--primary-color);
+      color: var(--primary-color);
+    }
+
+    &.disabled {
+      color: var(--light-text-color);
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &.prevMonthDay,
+    &.nextMonthDay {
+      color: color-mix(in srgb, var(--text-color) 25%, black);
+
+      &:hover {
+        background-color: var(--primary-color);
+        color: var(--background-color);
+      }
+    }
+  }
+
+  .flatpickr-time {
+    border-top: 1px solid var(--border-color);
+
+    input {
+      background-color: var(--background-color);
+      color: var(--text-color);
+    }
+  }
+}
+
+/* Trix */
+
+.trix-button {
+  background-color: color-mix(in srgb, var(--primary-color) 50%, var(--background-color)) !important;
+
+  &:hover, &.trix-active {
+    background-color: var(--primary-color) !important;
+  }
+}
diff --git a/app/assets/stylesheets/madmin/pagination.css b/app/assets/stylesheets/madmin/pagination.css
@@ -20,23 +20,23 @@
     --tw-ring-color: #D1D5DB;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    color: #111827;
-    background-color: #ffffff;
+    color: var(--text-color);
+    background-color: var(--background-color);
     border-radius: 0.25rem;
     text-decoration: none;
   }
 
   a:hover {
-    background-color: #F3F4F6;
+    background-color: color-mix(in srgb, var(--background-color) 95%, var(--mix-color));
   }
 
   a:not([href]) {
-    color: #D1D5DB;
+    color: var(--light-text-color);
     cursor: default;
   }
 
   a.current {
-    color: #ffffff;
+    color: var(--background-color);
     background-color: var(--primary-color);
   }
 
@@ -48,12 +48,12 @@
     padding-right: 0.75rem;
     border-radius: 0.5rem;
     white-space: nowrap;
-    background-color: #E5E7EB;
+    background-color: color-mix(in srgb, var(--background-color) 90%, var(--mix-color));
   }
 
   label input {
     border-radius: 0.375rem;
     border-style: none;
-    background-color: #F3F4F6;
+    background-color: color-mix(in srgb, var(--background-color) 95%, var(--mix-color));
   }
 }
diff --git a/app/assets/stylesheets/madmin/sidebar.css b/app/assets/stylesheets/madmin/sidebar.css
@@ -45,11 +45,11 @@ main {
       margin-bottom: 0.1rem;
 
       &:hover {
-        background-color: rgb(243 244 246);
+        background-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
       }
 
       &.active {
-        background-color: rgb(243 244 246);
+        background-color: var(--primary-color);
         font-weight: 600;
       }
     }
@@ -71,6 +71,10 @@ main {
       svg {
         display: inline-block;
       }
+
+      &.hidden {
+        display: none;
+      }
     }
 
     &:hover {

diff --git a/app/assets/stylesheets/madmin/tables.css b/app/assets/stylesheets/madmin/tables.css
@@ -19,7 +19,7 @@ table {
     padding-left: 0.875rem;
 
     a {
-      color: rgb(17 24 39);
+      color: var(--light-text-color);
       text-decoration: none;
     }