FEATURE: automatic dark mode (#10341)

FEATURE: automatic dark mode (#10341)

A first step to adding automatic dark mode color scheme switching. Adds a new SCSS file at color_definitions.scss that serves to output all SCSS color variables as CSS custom properties. And replaces all SCSS color variables with the new CSS custom properties throughout the stylesheets.

This is an alpha feature at this point, can only be enabled via console using the default_dark_mode_color_scheme_id site setting.

diff --git a/app/assets/stylesheets/color_definitions.scss b/app/assets/stylesheets/color_definitions.scss
new file mode 100644
index 0000000..9da91ff
--- /dev/null
+++ b/app/assets/stylesheets/color_definitions.scss
@@ -0,0 +1,117 @@
+// This file maps all SCSS color variables to CSS custom properties.
+// It is compiled to CSS separately from the rest of the app.
+// The source variables come from color_transformations.scss and variables.scss
+
+@import "common/foundation/variables";
+
+// this converts HEX colors to RGBs so they can be used in vanilla CSS
+// i.e.: rgba(var(--primary-low-rgb), 0.5)
+//
+// Note that "rgba(var(--primary-low), 0.5)" will not work,
+// because --primary-low has a HEX color value
+
+@function hexToRGB($hex) {
+  @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+  --primary: #{$primary};
+  --secondary: #{$secondary};
+  --tertiary: #{$tertiary};
+  --quaternary: #{$quaternary};
+  --header_background: #{$header_background};
+  --header_primary: #{$header_primary};
+  --highlight: #{$highlight};
+  --danger: #{$danger};
+  --success: #{$success};
+  --love: #{$love};
+
+  --primary-rgb: #{hexToRGB($primary)};
+  --primary-low-rgb: #{hexToRGB($primary-low)};
+  --secondary-rgb: #{hexToRGB($secondary)};
+  --header_background-rgb: #{hexToRGB($header_background)};
+
+  --primary-very-low: #{$primary-very-low};
+  --primary-low: #{$primary-low};
+  --primary-low-mid: #{$primary-low-mid};
+  --primary-medium: #{$primary-medium};
+  --primary-high: #{$primary-high};
+  --primary-very-high: #{$primary-very-high};
+
+  --header_primary-low: #{$header_primary-low};
+  --header_primary-low-mid: #{$header_primary-low-mid};
+
+  --header_primary-medium: #{$header_primary-medium};
+  --header_primary-high: #{$header_primary-high};
+  --header_primary-very-high: #{$header_primary-very-high};
+
+  --secondary-low: #{$secondary-low};
+  --secondary-medium: #{$secondary-medium};
+  --secondary-high: #{$secondary-high};
+  --secondary-very-high: #{$secondary-very-high};
+
+  --tertiary-low: #{$tertiary-low};
+  --tertiary-medium: #{$tertiary-medium};
+  --tertiary-high: #{$tertiary-high};
+  --tertiary-hover: #{$tertiary-hover};
+
+  --quaternary-low: #{$quaternary-low};
+
+  --highlight-low: #{$highlight-low};
+  --highlight-medium: #{$highlight-medium};
+  --highlight-high: #{$highlight-high};
+
+  --danger-low: #{$danger-low};
+  --danger-low-mid: #{$danger-low-mid};
+  --danger-medium: #{$danger-medium};
+  --danger-hover: #{$danger-hover};
+
+  --success-low: #{$success-low};
+  --success-medium: #{$success-medium};
+  --success-hover: #{$success-hover};
+
+  --love-low: #{$love-low};
+  --wiki: #{$wiki};
+
+  --blend-primary-secondary-5: #{$blend-primary-secondary-5};
+  --primary-med-or-secondary-med: #{$primary-med-or-secondary-med};
+  --primary-med-or-secondary-high: #{$primary-med-or-secondary-high};
+  --primary-high-or-secondary-low: #{$primary-high-or-secondary-low};
+  --primary-low-mid-or-secondary-high: #{$primary-low-mid-or-secondary-high};
+  --primary-low-mid-or-secondary-low: #{$primary-low-mid-or-secondary-low};
+  --primary-or-primary-low-mid: #{$primary-or-primary-low-mid};
+  --highlight-low-or-medium: #{$highlight-low-or-medium};
+  --tertiary-low-or-tertiary-high: #{$tertiary-low-or-tertiary-high};
+  --tertiary-med-or-tertiary: #{$tertiary-med-or-tertiary};
+  --secondary-or-primary: #{$secondary-or-primary};
+  --tertiary-or-white: #{$tertiary-or-white};
+  --facebook-or-white: #{$facebook-or-white};
+  --twitter-or-white: #{$twitter-or-white};
+
+  --hljs-comment: #{$hljs-comment};
+  --hljs-number: #{$hljs-number};
+  --hljs-string: #{$hljs-string};
+  --hljs-literal: #{$hljs-literal};
+  --hljs-tag: #{$hljs-tag};
+  --hljs-attribute: #{$hljs-attribute};
+  --hljs-symbol: #{$hljs-symbol};
+  --hljs-bg: #{$hljs-bg};
+
+  --google: #{$google};
+  --google-hover: #{$google-hover};
+  --instagram: #{$instagram};
+  --instagram-hover: #{$instagram-hover};
+  --facebook: #{$facebook};
+  --facebook-hover: #{$facebook-hover};
+  --cas: #{$cas};
+  --twitter: #{$twitter};
+  --twitter-hover: #{$twitter-hover};
+  --github: #{$github};
+  --github-hover: #{$github-hover};
+  --discord: #{$discord};
+  --discord-hover: #{$discord-hover};
+
+  --gold: #{$gold};
+  --silver: #{$silver};
+  --bronze: #{$bronze};
+}
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 208e912..0feef6c 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -59,8 +59,8 @@ $mobile-breakpoint: 700px;
       height: 100%;
       background: linear-gradient(
         to right,
-        rgba($secondary, 1) 0%,
-        rgba($secondary, 0) 100%
+        rgba(var(--secondary-rgb), 1) 0%,
+        rgba(var(--secondary-rgb), 0) 100%
       );
     }
     &:after {
@@ -71,8 +71,8 @@ $mobile-breakpoint: 700px;
       height: 100%;
       background: linear-gradient(
         to right,
-        rgba($secondary, 0) 0%,
-        rgba($secondary, 1) 100%
+        rgba(var(--secondary-rgb), 0) 0%,
+        rgba(var(--secondary-rgb), 1) 100%
       );
     }
   }
@@ -100,10 +100,10 @@ $mobile-breakpoint: 700px;
     padding: 8px;
   }
   tr:hover {
-    background-color: $primary-very-low;
+    background-color: var(--primary-very-low);
   }
   tr.selected {
-    background-color: $primary-low;
+    background-color: var(--primary-low);
   }
   .filters input {
     margin-bottom: 0;
@@ -134,7 +134,7 @@ $mobile-breakpoint: 700px;
     }
     .label {
       display: block;
-      color: $primary-medium;
+      color: var(--primary-medium);
       font-size: $font-down-1;
       margin: 0.5em 0 0.15em 0;
     }
@@ -213,10 +213,10 @@ $mobile-breakpoint: 700px;
   }
   .site-text {
     cursor: pointer;
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
     margin-bottom: 0.5em;
     &.overridden {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium);
     }
     h3 {
       font-weight: normal;
@@ -236,7 +236,7 @@ $mobile-breakpoint: 700px;
       @include breakpoint(mobile-extra-large) {
         word-wrap: break-word;
       }
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
   .edit-site-text {
@@ -258,7 +258,7 @@ $mobile-breakpoint: 700px;
     }
   }
   p.warning {
-    color: $danger;
+    color: var(--danger);
   }
 }
 
@@ -269,10 +269,10 @@ $mobile-breakpoint: 700px;
     font-size: $font-down-1;
     float: right;
     margin-right: 10px;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     padding: 2px 5px;
     border-radius: 5px;
-    color: $primary;
+    color: var(--primary);
   }
 }
 
@@ -324,11 +324,11 @@ $mobile-breakpoint: 700px;
       display: inline-block;
       .bar {
         margin-top: 5px;
-        background-color: $tertiary;
+        background-color: var(--tertiary);
         display: inline-block;
         text-align: right;
         padding-right: 8px;
-        color: $secondary;
+        color: var(--secondary);
       }
     }
   }
@@ -340,7 +340,7 @@ $mobile-breakpoint: 700px;
 
 .admin-users .users-list {
   .username .d-icon {
-    color: $primary-medium;
+    color: var(--primary-medium);
   }
 }
 
@@ -354,7 +354,7 @@ $mobile-breakpoint: 700px;
     z-index: z("dropdown");
     box-shadow: shadow("card");
     margin-top: -2px;
-    background-color: $secondary;
+    background-color: var(--secondary);
     padding: 12px 12px 5px;
     .powered-by {
       font-size: $font-down-1;
@@ -438,14 +438,14 @@ $mobile-breakpoint: 700px;
 
 .admin-controls {
   display: flex;
-  background-color: $primary-low;
+  background-color: var(--primary-low);
   align-items: center;
 
   .admin-actions {
     margin-left: auto;
   }
   nav {
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     width: 100%;

[... diff too long, it was truncated ...]

GitHub sha: c937afc7

This commit appears in #10341 which was approved by eviltrout. It was merged by pmusaraj.