Consolidate color variables for light/dark mode

caleb531 · Jan 25, 2025 · 5772cb3 · 5772cb3
1 parent 32ee0f7
commit 5772cb3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 50 deletions.
diff --git a/styles/_colors.scss b/styles/_colors.scss
@@ -1,3 +1,5 @@
+@use 'mixins' as *;
+
 :root {
   --update-notification-color: hsl(207, 60%, 50%);
   --empty-chip-slot-border-color: hsl(0, 0%, 80%);
@@ -10,36 +12,29 @@
   --input-focus-border-color: hsl(220, 60%, 50%);
   --input-focus-box-shadow-color: hsl(210, 100%, 80%);
 
-  // Dark Mode Colors
-  --app-background-color-dark: hsl(0, 0%, 7%);
-  --app-color-dark: hsl(0, 0%, 100%);
-  --empty-chip-slot-border-color-dark: hsl(0, 0%, 20%);
-
-  // Player reactions
-  --player-reaction-offset: -15px;
-  --player-reaction-transition-duration: 300ms;
-
   // Player/chip colors
-  --player-color-light-black: hsl(0, 0%, 27%);
-  --player-color-light-blue: hsl(220, 60%, 50%);
-  --player-color-light-red: hsl(0, 60%, 50%);
+  --player-color-black: hsl(0, 0%, 27%);
+  --player-color-blue: hsl(220, 60%, 50%);
+  --player-color-red: hsl(0, 60%, 50%);
 
-  // Player/chip colors for Dark Mode
-  --player-color-dark-black: hsl(0, 0%, 40%);
-  --player-color-dark-blue: hsl(220, 82%, 37%);
-  --player-color-dark-red: hsl(0, 69%, 43%);
+  // Dark mode
+  @media (prefers-color-scheme: dark) {
+    --app-background-color: hsl(0, 0%, 7%);
+    --app-text-color: hsl(0, 0%, 100%);
+    --empty-chip-slot-border-color: hsl(0, 0%, 20%);
+    --player-color-black: hsl(0, 0%, 40%);
+    --player-color-blue: hsl(220, 82%, 37%);
+    --player-color-red: hsl(0, 69%, 43%);
+  }
 }
 
 // Define standard player colors that any element can use
 .red {
-  --player-color-light: var(--player-color-light-red);
-  --player-color-dark: var(--player-color-dark-red);
+  --player-color: var(--player-color-red);
 }
 .blue {
-  --player-color-light: var(--player-color-light-blue);
-  --player-color-dark: var(--player-color-dark-blue);
+  --player-color: var(--player-color-blue);
 }
 .black {
-  --player-color-light: var(--player-color-light-black);
-  --player-color-dark: var(--player-color-dark-black);
+  --player-color: var(--player-color-black);
 }
diff --git a/styles/_containers.scss b/styles/_containers.scss
@@ -9,13 +9,11 @@ body {
   // Ensure that the absolutely-positioned nav links do not get pushed out of
   // the bounds of the <body> due to the <h1> margin-top
   padding-top: 1px;
+  background-color: var(--app-background-color);
   font-family: var(--sans-serif);
   text-align: center;
+  color: var(--app-text-color);
   overflow-y: scroll;
-  @include dark-mode() {
-    background-color: var(--app-background-color-dark);
-    color: var(--app-color-dark);
-  }
 }
 
 // Ensure that the <main> element renders correctly on browsers that don't fully

diff --git a/styles/_grid.scss b/styles/_grid.scss
@@ -46,9 +46,6 @@
 
 .empty-chip-slot-inner {
   border-color: var(--empty-chip-slot-border-color);
-  @include dark-mode() {
-    border-color: var(--empty-chip-slot-border-color-dark);
-  }
 }
 
 @keyframes fade-in-chip {
@@ -68,17 +65,11 @@
 }
 
 .chip {
-  --chip-background-color-light: var(--player-color-light);
-  --chip-background-color-dark: var(--player-color-dark);
-  --chip-border-color-light: hsla(0, 0%, 0%, 0.25);
-  --chip-border-color-dark: hsla(0, 0%, 0%, 0.25);
+  --chip-background-color: var(--player-color);
+  --chip-border-color: hsla(0, 0%, 0%, 0.25);
   .chip-inner {
-    border-color: var(--chip-border-color-light);
-    background-color: var(--chip-background-color-light);
-    @include dark-mode() {
-      border-color: var(--chip-border-color-dark);
-      background-color: var(--chip-background-color-dark);
-    }
+    border-color: var(--chip-border-color);
+    background-color: var(--chip-background-color);
   }
   // The pending chip is the to-be-placed chip above the board
   &.pending {

diff --git a/styles/_mixins.scss b/styles/_mixins.scss
@@ -18,10 +18,3 @@ $page-min-width-compact: 320px;
     @content;
   }
 }
-
-// Add mixin to style elements when Dark Mode is enabled on the user's OS
-@mixin dark-mode() {
-  @media (prefers-color-scheme: dark) {
-    @content;
-  }
-}
diff --git a/styles/_player-area.scss b/styles/_player-area.scss
@@ -1,5 +1,10 @@
 @use 'mixins' as *;
 
+:root {
+  --player-reaction-offset: -15px;
+  --player-reaction-transition-duration: 300ms;
+}
+
 #player-area {
   position: relative;
 }
@@ -28,10 +33,7 @@
       right: var(--player-reaction-offset);
     }
   }
-  color: var(--player-color-light);
-  @include dark-mode() {
-    color: var(--player-color-dark);
-  }
+  color: var(--player-color);
 }
 
 .player-name,