feat: light mode with optional dark mode toggle (#999)

Author: olizilla

assets/_custom.scss

@@ -4,6 +4,7 @@
 
 // @import "plugins/numbered";
 @import "plugins/scrollbars";
+@import "plugins/toggles";
 @import "table-sort";
 @import "colors";
 @import "dashboard";
@@ -165,26 +166,51 @@ blockquote {
 }
 
 .book-toc {
-    .toc-label {
+    .book-toc-toggles {
+        top:0px;
+        opacity: 0.4;
+        transition: opacity 0.3s ease-in-out;
+    }
+    .book-toc-toggles:hover {
+        opacity: 1;
+    }
+    .toc {
+        top:78px;
+    }
+    .toc-label, .dark-mode-toggle-label {
         font-size: 10px;
         font-weight: 700;
+        display: block;
     }
-    .gg-menu-motion {
+    .gg-menu-motion, .gg-dark-mode {
         display: inline-block;
         margin-left: 0;
         margin-right: 0;
-        vertical-align: text-top;
+        vertical-align: middle;
         font-size: 10px;
         transform: scale(0.7);
     }
 }
 
-h1,
-h2,
-h3,
-h4,
-h5 {
-  color: rgba(255,255,255,0.87)
+// Colors
+.color-incorrect {
+    color: #BF616A;
+}
+
+.color-wip {
+    color: #D08770;
+}
+
+.color-incomplete {
+    color: #EBCB8B;
+}
+
+.color-stable {
+    color: #5E81AC;
+}
+
+.color-permanent {
+    color: #A3BE8C;
 }
 
 i[class^="gg-"] {
@@ -380,4 +406,45 @@ i[class^="gg-"] {
     box-shadow: 4px -6px 0,8px -12px 0;
     border-radius: 4px;
     background: currentColor
-} 
+} 
+
+.gg-dark-mode {
+    box-sizing: border-box;
+    position: relative;
+    display: block;
+    transform: scale(var(--ggs,1));
+    border:2px solid;
+    border-radius:100px;
+    width:20px;
+    height:20px
+}
+
+.gg-dark-mode::after,
+.gg-dark-mode::before {
+    content: "";
+    box-sizing: border-box;
+    position: absolute;
+    display: block
+}
+
+.gg-dark-mode::before {
+    border:5px solid;
+    border-top-left-radius:100px;
+    border-bottom-left-radius:100px;
+    border-right: 0;
+    width:9px;
+    height:18px;
+    top:-1px;
+    left:-1px
+}
+
+.gg-dark-mode::after {
+    border:4px solid;
+    border-top-right-radius:100px;
+    border-bottom-right-radius:100px;
+    border-left: 0;
+    width:4px;
+    height:8px;
+    right:4px;
+    top:4px
+}

assets/_variables.scss

@@ -1,4 +1 @@
 /* You can override SASS variables here. */
-
-@import "plugins/dark";
-

assets/book-dark.scss

@@ -0,0 +1,17 @@
+@import "defaults";
+@import "variables";
+
+// Import the dark overrides. This file is otherwise identical to dark.scss
+@import "plugins/dark.scss";
+
+@import "normalize";
+@import "utils";
+@import "main";
+@import "fonts";
+@import "print";
+
+@import "markdown";
+@import "shortcodes";
+
+// Custom defined styles
+@import "custom";

assets/dark-mode/dark-mode.js

@@ -0,0 +1,52 @@
+// iife to avoid polluting the global.
+(function () {
+  // Run me as soon as possible after the the css links are in the dom.
+  // This assumes this js file is added to the page after the css links.
+  const lightMode = document.getElementById('light-mode-link')
+  const darkMode = document.getElementById('dark-mode-link')
+  const btn = document.querySelector('.dark-mode-toggle')
+  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches 
+  let theme = prefersDarkScheme ? 'dark' : 'light'
+
+  function enableLightMode () {
+    lightMode.disabled = false
+    darkMode.disabled = true
+    btn.setAttribute('aria-pressed', theme === 'dark')
+  }
+
+  function enableDarkMode () {
+    darkMode.disabled = false
+    lightMode.disabled = true
+    btn.setAttribute('aria-pressed', theme === 'dark')
+  }
+  
+  // enable dark theme optimistically on OS with dark theme enabled to reduce flashing of white theme.
+  if (prefersDarkScheme) {
+    enableDarkMode()
+  }
+
+  // wait for localstorage...
+  const previousChoice = localStorage.getItem('theme')
+  theme = previousChoice || theme
+  
+  // Light is default, so enable dark if user previously chose it but their OS pref is light.
+  if (theme === 'dark') {
+    enableDarkMode()
+  }
+
+  // set up the toggle once the DOM is ready.
+  document.addEventListener("DOMContentLoaded", function(event) {
+    
+    btn.addEventListener('click', function () {
+      theme = (theme === 'light' ? 'dark' : 'light')
+      if (theme === 'dark') {
+        enableDarkMode()
+      } else {
+        enableLightMode()
+      }
+      localStorage.setItem('theme', theme)
+    })
+    // init the button state to match the currently selected theme.
+    btn.setAttribute('aria-pressed', theme === 'dark')
+  });  
+})()

assets/plugins/_dark.scss

@@ -3,7 +3,7 @@ $gray-200: #282a36;
 
 // https://www.colorhexa.com/090909
 $body-background: #090909;
-$body-font-color: rgba(255, 255, 255, 0.60);
+$body-font-color: rgba(255, 255, 255, 0.80);
 
 $color-link: #0090ff;
 $color-visited-link: #0090ff;