Implement initial Dark Mode

app/styles/_containers.scss

@@ -10,6 +10,10 @@ body {
   font-family: $sans-serif;
   text-align: center;
   overflow-y: scroll;
+  @include dark-mode() {
+    background-color: $app-dark-background-color;
+    color: $app-dark-color;
+  }
 }
 
 // Ensure that the <main> element renders correctly on browsers that don't fully

app/styles/_grid.scss

@@ -44,6 +44,9 @@
 
 .empty-chip-slot-inner {
   border-color: $empty-chip-slot-border-color;
+  @include dark-mode() {
+    border-color: $empty-chip-slot-dark-border-color;
+  }
 }
 
 @keyframes fade-in-chip {
@@ -65,10 +68,16 @@
 .chip {
   @each $player-color-name, $player-color in $player-colors {
     &.#{$player-color-name} .chip-inner {
-      $border-color: darken($player-color, 10%);
       $background-color: $player-color;
+      $border-color: darken($background-color, 10%);
       border-color: $border-color;
       background-color: $background-color;
+      @include dark-mode() {
+        $background-color: map-get($player-dark-colors, $player-color-name);
+        $border-color: darken($background-color, 10%);
+        border-color: $border-color;
+        background-color: $background-color;
+      }
     }
   }
   // The pending chip is the to-be-placed chip above the board

app/styles/_mixins.scss

@@ -15,3 +15,10 @@
     @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;
+  }
+}

app/styles/_player-area.scss

@@ -29,6 +29,12 @@
   @each $player-color-name, $player-color in $player-colors {
     &.#{$player-color-name} {
       color: $player-color;
+      @include dark-mode() {
+        color: map-get($player-dark-colors, $player-color-name);
+        .player-name {
+          color: lighten(map-get($player-dark-colors, $player-color-name), 10%);
+        }
+      }
     }
   }
 }

app/styles/_variables.scss

@@ -33,6 +33,11 @@ $button-warn-background-color: #d60;
 $input-focus-border-color: #36c;
 $input-focus-box-shadow-color: #9cf;
 
+// Dark Mode Colors
+$app-dark-background-color: #111;
+$app-dark-color: #fff;
+$empty-chip-slot-dark-border-color: #333;
+
 // Player reactions
 $player-reaction-offset: -15px;
 $player-reaction-transition-duration: 300ms;
@@ -43,3 +48,10 @@ $player-colors: (
   'blue': #36c,
   'red': #c33
 );
+
+// Player/chip colors for Dark Mode
+$player-dark-colors: (
+  'black': #666,
+  'blue': #14a,
+  'red': #b22
+);