Support dark mode

assets/js/application.js

@@ -29,6 +29,7 @@ const baseURLPrefix = (() => {
 
 $(document).ready(function() {
   BrowserFallbacks.init();
+  DarkMode.init();
   Search.init();
   Dropdowns.init();
   Forms.init();
@@ -541,6 +542,38 @@ var Downloads = {
   },
 }
 
+var DarkMode = {
+  init: function() {
+    const button = $('#dark-mode-button');
+    if (!button.length) return;
+    button.show(3000);
+
+    // Check for dark mode preference at the OS level
+    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    // Get the user's theme preference from local storage, if it's available
+    const currentTheme = localStorage.getItem("theme");
+
+    if ((prefersDarkScheme && currentTheme !== "light")
+        || (!prefersDarkScheme && currentTheme === "dark")) {
+      button.text("🌞");
+    }
+
+    button.click(function(e) {
+      e.preventDefault();
+      let theme
+      if (prefersDarkScheme) {
+        theme = document.documentElement.dataset.theme === "light" ? "dark" : "light"
+      } else {
+        theme = document.documentElement.dataset.theme === "dark" ? "light" : "dark"
+      }
+      document.documentElement.dataset.theme = theme
+      localStorage.setItem("theme", theme);
+      button.text(theme === "dark" ? "🌞" : "🌙");
+    });
+  },
+}
+
 // Scroll to Top
 $('#scrollToTop').removeClass('no-js');
 $(window).scroll(function() {

assets/sass/application.scss

@@ -27,17 +27,18 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'book2';
 @import 'lists';
 @import 'about';
+@import 'dark-mode';
 
 code {
   display: inline;
   padding: 0 5px;
 }
 
 pre {
-  background-color: #fff;
+  background-color: var(--main-bg);
   border: solid 1px #efeee6;
   border-radius: 3px;
-  color: $orange;
+  color: var(--orange);
   display: block;
   font-family: $fixed-width-font-family;
   font-variant-ligatures: none;

assets/sass/book.scss

@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 .ebooks img {
   padding: 5px;
@@ -13,7 +12,7 @@
   padding-bottom: 20px !important;
   background-color: transparent !important;
   overflow: hidden;
-  border: solid 1px lighten($base-border-color, 10%);
+  border: solid 1px var(--base-border-color-lighter-10);
 }
 
 #book-intro {
@@ -36,7 +35,7 @@
   .license {
     font-size: 11px;
     line-height: 1.3;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   a#open-book {
@@ -52,7 +51,7 @@
   display: none;
   padding-left: 22px;
   font-size: 12px;
-  color: $light-font-color;
+  color: var(--light-font-color);
   text-align: center;
   text-indent: 40px;
 
@@ -74,7 +73,7 @@ ol.book-toc {
   }
 
   h2 {
-    color: $font-color;
+    color: var(--font-color);
   }
 
   a {
@@ -140,7 +139,7 @@ ol.book-toc {
 
           &.active {
             font-weight: bold;
-            color: $orange;
+            color: var(--orange);
           }
         }
       }

assets/sass/dark-mode.css

@@ -0,0 +1,178 @@
+@mixin mode($mode: light, $theme: "") {
+    // Palette
+    $orange:                  #f14e32;
+    $blue:                    #009099;
+    $font-color:              #4e443c;
+    $aside-font-color:        lighten($font-color, 20%);
+    $light-font-color:        #9a9994;
+    $link-color:              #0388a6;
+    $nav-link-color:          #413932;
+    $fixed-width-font-color:  #4e443c;
+    $button-bg-color:         rgba(223, 221, 213, 0.33);
+    $button-bg-hover-color:   rgba(250, 250, 250, 0.9);
+    $mark-color:              #ff0;
+    $base-border-color:       #d8d7cf;
+    $callout-color:           #e9e8e0;
+    $highlight-bg-color:      #eee0b5;
+    $black-3:                 #333333;
+    $main-bg:                 #fcfcfa;
+    $bg-color:                #f0efe7 url($baseurl + "images/bg/body.jpg");
+    $sidebar-bg-color:        #efefe7;
+    $no-changes-bg-color:     #f5f5f3;
+    $dropdown-active-bg-color: #fff;
+    $versions-footer-bg-color: #eae9e0;
+
+    @if $mode == dark {
+        $orange:                  #d7834f;
+        $blue:                    #007a7e;
+        $font-color:              #b3b1b1;
+        $aside-font-color:        darken($font-color, 10%);
+        $light-font-color:        #bdbbb0;
+        $link-color:              #5facaf;
+        $nav-link-color:          #979594;
+        $fixed-width-font-color:  #afa7a0;
+        $button-bg-hover-color:   rgba(223, 221, 213, 0.6);
+        $mark-color:              #aeae74;
+        $base-border-color:       #b3b2a7;
+        $callout-color:           #555555;
+        $highlight-bg-color:      #7d724f;
+        $black-3:                 #cccccc;
+        $main-bg:                 #333333;
+        $bg-color:                #2a2a2aff;
+        $sidebar-bg-color:        #3d3d3a;
+        $no-changes-bg-color:     #515150;
+        $dropdown-active-bg-color: #515150;
+        $versions-footer-bg-color: #1f1f1e;
+
+        :root#{$theme} {
+            div#masthead {
+                background: transparent;
+            }
+            div#masthead::before {
+                content: "";
+                width: 100%;
+                height: 295px;
+                @include background-image-2x($baseurl + "images/bg/isometric-grid", 35px, 21px, top right, repeat);
+                position: absolute;
+                filter: brightness(.4) contrast(1.6);
+                z-index: -1;
+            }
+            img {
+                filter: brightness(.6) contrast(1.2);
+            }
+            // let the logo shine slightly brighter
+            img[alt="Git"] {
+                filter: brightness(0.9) contrast(1.5);
+            }
+
+            a.subtle-button {
+                background-image: linear-gradient(#555555, #777777);
+                border-top: solid 1px #333333;
+                border-right: solid 1px #333333;
+                border-bottom: solid 1px #333333;
+                border-left: solid 1px #333333;
+                @include box-shadow(none);
+            }
+
+            a {
+                text-decoration: dashed 1px underline;
+            }
+
+            #front-nav img {
+                filter: none;
+            }
+
+            div.monitor {
+                filter: brightness(.85);
+            }
+
+            .monitor a {
+                color: #dbd7d7;
+            }
+
+            hr.sidebar {
+                filter: brightness(0.5);
+            }
+
+            #documentation #main div.verseblock pre.content {
+                color: var(--light-font-color);
+                background-color: #5e5951;
+            }
+
+            form#search {
+                @include box-shadow(none);
+            }
+
+            input.pagefind-ui__search-input {
+                background: var(--main-bg);
+            }
+
+            #reference-version {
+                background-color: rgba(111, 110, 105, 0.33);
+            }
+
+            #l10n-versions-dropdown footer a {
+                color: #6969dd;
+            }
+        }
+    }
+
+    :root#{$theme} {
+        --orange:                       #{$orange};
+        --orange-darker-5:              #{darken($orange, 5%)};
+        --blue:                         #{$blue};
+        --font-color:                   #{$font-color};
+        --aside-font-color:             #{$aside-font-color};
+        --light-font-color:             #{$light-font-color};
+        --light-font-color-darker-10:   #{darken($light-font-color, 10%)};
+        --light-font-color-darker-25:   #{darken($light-font-color, 25%)};
+        --light-font-color-darker-35:   #{darken($light-font-color, 35%)};
+        --light-font-color-darker-55:   #{darken($light-font-color, 55%)};
+        --light-font-color-lighter-20:  #{lighten($light-font-color, 20%)};
+        --link-color:                   #{$link-color};
+        --nav-link-color:               #{$nav-link-color};
+        --link-hover-color:             #{lighten($link-color, 10%)};
+        --fixed-width-font-color:       #{$fixed-width-font-color};
+        --button-bg-color:              #{$button-bg-color};
+        --button-bg-hover-color:        #{$button-bg-hover-color};
+        --mark-color:                   #{$mark-color};
+        --base-border-color:            #{$base-border-color};
+        --base-border-color-darker-8:   #{darken($base-border-color, 8%)};
+        --base-border-color-lighter-10: #{lighten($base-border-color, 10%)};
+        --callout-color:                #{$callout-color};
+        --highlight-bg-color:           #{$highlight-bg-color};
+
+        --black-3:                      #{$black-3};
+        --main-bg:                      #{$main-bg};
+        --sidebar-bg-color:             #{$sidebar-bg-color};
+        --bg-color:                     #{$bg-color};
+        --no-changes-bg-color:          #{$no-changes-bg-color};
+        --dropdown-active-bg-color:     #{$dropdown-active-bg-color};
+        --versions-footer-bg-color:     #{$versions-footer-bg-color};
+    }
+}
+
+@include mode
+@include mode($mode: dark, $theme: '[data-theme="dark"]')
+
+@media screen and (prefers-color-scheme: dark) {
+    @include mode($mode: dark)
+    @include mode($mode: light, $theme: '[data-theme="light"]')
+}
+
+#dark-mode-button {
+    display: none;
+    z-index: 10;
+    position: fixed;
+    right: 20px;
+    bottom: 2rem;
+    border-radius: 50px;
+    border: 2px solid transparent;
+    font-size: x-large;
+    padding: 10px 5px 10px 5px;
+    background-color: var(--button-bg-color);
+    &:hover {
+        background-color: var(--button-bg-hover-color);
+    }
+    text-decoration: none;
+}

assets/sass/downloads.scss

@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 #logo-license {
   @extend .callout;
@@ -10,7 +9,7 @@
   p {
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   p + p {
@@ -56,7 +55,7 @@
 
   a {
     display: block;
-    color: $font-color;
+    color: var(--font-color);
     text-align: center;
     background-repeat: no-repeat;
     background-position: 0 0;
@@ -75,7 +74,7 @@
     h3 {
       font-size: 18px;
       font-weight: bold;
-      color: $orange;
+      color: var(--orange);
     }
 
     p {
@@ -90,7 +89,7 @@
     }
 
     h3 {
-      color: darken($orange, 5%);
+      color: var(--orange-darker-5);
     }
   }
 }
@@ -100,7 +99,7 @@
   top: 8px;
   left: 12px;
   display: none;
-  color: $orange;
+  color: var(--orange);
 }
 
 .downloading .hide {

assets/sass/errors.scss

@@ -5,8 +5,8 @@ body {
   font-size: $base-font-size;
   line-height: $base-line-height;
   font-family: $base-font-family;
-  color: $font-color;
-  background: #f0efe7 url($baseurl + "images/bg/body.jpg");
+  color: var(--font-color);
+  background: var(--bg-color);
 }
 
 // windows chrome makes a mess of Adelle web font
@@ -43,9 +43,9 @@ nav ul {
     li {
       a {
         display: block;
-        color: $orange;
+        color: var(--orange);
         &:hover {
-          color: darken($orange, 5%);
+          color: var(--orange-darker-5);
         }
       }
     }