From 42c715107cebe2a5d476b3949452f72c2e59a090 Mon Sep 17 00:00:00 2001
From: Caleb Evans <caleb@calebevans.me>
Date: Mon, 4 Nov 2019 12:47:36 -0800
Subject: [PATCH] Implement initial Dark Mode

---
 app/styles/_containers.scss  |  4 ++++
 app/styles/_grid.scss        | 11 ++++++++++-
 app/styles/_mixins.scss      |  7 +++++++
 app/styles/_player-area.scss |  6 ++++++
 app/styles/_variables.scss   | 12 ++++++++++++
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/app/styles/_containers.scss b/app/styles/_containers.scss
index e5126f4..c195603 100644
--- a/app/styles/_containers.scss
+++ b/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
diff --git a/app/styles/_grid.scss b/app/styles/_grid.scss
index 15c62fd..a882180 100644
--- a/app/styles/_grid.scss
+++ b/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
diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 0cf95b2..3f943fc 100644
--- a/app/styles/_mixins.scss
+++ b/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;
+  }
+}
diff --git a/app/styles/_player-area.scss b/app/styles/_player-area.scss
index 5347997..45a4bab 100644
--- a/app/styles/_player-area.scss
+++ b/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%);
+        }
+      }
     }
   }
 }
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index 9e26816..aaaef42 100644
--- a/app/styles/_variables.scss
+++ b/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
+);