Add dark theme support

dhenry123 · Jan 8, 2024 · 273aadc · 273aadc
1 parent 5a5c06b
commit 273aadc
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 6 deletions.
diff --git a/client/src/app/css/root.scss b/client/src/app/css/root.scss
@@ -3,6 +3,7 @@ $color-text-primary: #363535;
 $color-text-secondary: #ebebeb;
 $color-primary-focus: #5096c5;
 $color-primary-box-shadow: #e7e4e4;
+$color-dark-box-shadow: #515151;
 $color-success: #653799;
 $color-error: #f5637e;
 $color-warning: #ef145c;
@@ -16,6 +17,9 @@ $badge-color-warning: #ffa500;
 $button-generic-background-color: $color-text-secondary;
 $button-generic-color: $color-text-primary;
 
+$background-dark: $color-text-primary;
+$text-dark: $color-text-secondary;
+
 // padding - margin
 $padding-default: 0.5rem 0.5rem;
 $padding-badge: 0 0.4rem;
@@ -34,6 +38,7 @@ $badge-component-border-radius: 4px;
 
 // shadows
 $boxshadow-default: 4px 4px 10px 2px $color-primary-box-shadow;
+$boxshadow-default-dark: 4px 4px 10px 2px $color-dark-box-shadow;
 
 // inputs
 $input-outline-default: 1px solid $color-primary-focus;
@@ -106,7 +111,6 @@ body {
   margin: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  font-family: Work Sans, sans-serif;
   font-weight: 500 !important;
   font-size: 14px;
   font-variation-settings: normal;
@@ -120,3 +124,21 @@ body {
   width: 100%;
   height: 100%;
 }
+
+// dark mode
+@media (prefers-color-scheme: dark) {
+    :root {
+      color-scheme: dark;
+      color: $text-dark;
+      background-color: $background-dark;
+    }
+
+  .main {
+    background-color: $background-dark;
+  }
+
+  legend, h1, h2 {
+    color: $text-dark;
+  }
+
+}
diff --git a/client/src/components/Badge.scss b/client/src/components/Badge.scss
@@ -16,8 +16,8 @@
     width: max-content;
     border-radius: $badge-component-border-radius 0 0
       $badge-component-border-radius;
-      display: flex;
-align-items: center;
+    display: flex;
+    align-items: center;
   }
   .value {
     padding: $padding-badge;

diff --git a/client/src/components/Block.scss b/client/src/components/Block.scss
@@ -7,3 +7,9 @@
   margin: $margin-default;
   border: $border-default;
 }
+
+@media (prefers-color-scheme: dark) {
+  .Block {
+    box-shadow: $boxshadow-default-dark;
+  }
+}
diff --git a/client/src/components/CheckBox.scss b/client/src/components/CheckBox.scss
@@ -1,4 +1,8 @@
 @import "../app/css/root.scss";
 .CheckBox {
   display: flex;
+  color: inherit;
+  @media (prefers-color-scheme: dark) {
+    color: $text-dark;
+  }
 }
diff --git a/client/src/components/Control.scss b/client/src/components/Control.scss
@@ -13,11 +13,13 @@
       filter: grayscale(100%);
       min-width: 90px;
       min-height: 90px;
-      align-self: first baseline;
       .content {
         img {
           width: 90px;
           height: 90px;
+          @media (prefers-color-scheme: dark) {
+            filter: invert(1);
+          }
         }
       }
     }

diff --git a/client/src/components/Dialog.scss b/client/src/components/Dialog.scss
@@ -33,6 +33,12 @@
       animation-duration: 0.4s;
       max-height: 94vh;
       overflow-y: auto;
+
+      @media (prefers-color-scheme: dark) {
+        background-color: $background-dark;
+        color: $text-dark;
+      }
+
       .modal-header {
         padding: 0 0.5rem;
         border-radius: $border-radius-default $border-radius-default 0 0;
@@ -41,6 +47,10 @@
         display: flex;
         align-items: start;
         min-width: 30vw;
+        @media (prefers-color-scheme: dark) {
+          background-color: $background-dark;
+          color: $text-dark;
+        }
         h2 {
           text-transform: none;
           font-size: 1rem;

diff --git a/client/src/components/FieldSet.scss b/client/src/components/FieldSet.scss
@@ -10,5 +10,9 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+
+    @media (prefers-color-scheme: dark) {
+      color: $text-dark;
+    }
   }
 }
diff --git a/client/src/components/Header.scss b/client/src/components/Header.scss
@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: white;
+
   position: fixed;
   top: 0;
   left: 0;

diff --git a/client/src/components/ScrapProduction.scss b/client/src/components/ScrapProduction.scss
@@ -41,6 +41,10 @@
         padding: $padding-default;
         overflow-x: hidden;
         overflow-y: auto;
+
+        @media (prefers-color-scheme: dark) {
+          color: $text-dark;
+        }
       }
     }
     .version {

diff --git a/client/src/components/Stepper.scss b/client/src/components/Stepper.scss
@@ -13,14 +13,16 @@
     display: flex;
     flex-direction: column;
     row-gap: $rowgap-default;
-    max-width: inherit;
     .separator {
       align-self: center;
       min-height: 3rem;
       width: 0.5rem;
       border-radius: 4px 4px 100% 100%;
       background-color: #e7dfdf;
       box-shadow: 4px 4px 8px #d6d5d5;
+      @media (prefers-color-scheme: dark) {
+          box-shadow: $boxshadow-default-dark;
+      }
       &.done {
         background-color: $color-success;
       }
@@ -33,6 +35,9 @@
       align-self: center;
       background-color: $color-text-secondary;
       box-shadow: $boxshadow-default;
+      @media (prefers-color-scheme: dark) {
+          box-shadow: $boxshadow-default-dark;
+      }
       i {
         margin: auto;
         font-size: 1.5rem;