Support dark mode

assets/js/application.js

@@ -31,6 +31,7 @@ const baseURLPrefix = (() => {
 
 $(document).ready(function() {
   BrowserFallbacks.init();
+  DarkMode.init();
   Search.init();
   Dropdowns.init();
   Forms.init();
@@ -222,7 +223,12 @@ var Search = {
             $("#show-results-label").text("No matching pages found.");
             return;
           }
-          $("#show-results-label").text("Show all results...");
+
+          const language = document.querySelector("html")?.getAttribute("lang");
+          $("#show-results-label")
+            .text("Show all results...")
+            .attr('href', `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`);
+
           const loadButton = $("#load-more-results");
           loadButton.text(`Loading ${
             results.results.length < 2
@@ -299,11 +305,6 @@ var Search = {
   selectResultOption: function() {
     var link = $('#search-results a')[Search.selectedIndex];
     var url = $(link).attr('href');
-    if(!url) {
-      const term = $('#search-text').val();
-      const language = document.querySelector("html")?.getAttribute("lang");
-      url = `${baseURLPrefix}search/results?search=${term}${language && `&language=${language}`}`;
-    }
     window.location.href = url;
     selectedIndex = 0;
   },
@@ -551,6 +552,38 @@ var Downloads = {
   },
 }
 
+var DarkMode = {
+  init: function() {
+    const button = $('#dark-mode-button');
+    if (!button.length) return;
+
+    // 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.attr("src", `${baseURLPrefix}images/light-mode.svg`);
+    }
+    button.css("display", "block");
+
+    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.attr("src", `${baseURLPrefix}images/${theme === "dark" ? "light" : "dark"}-mode.svg`);
+    });
+  },
+}
+
 // 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;
-  border: solid 1px #efeee6;
+  background-color: var(--main-bg);
+  border: solid 1px var(--pre-border);
   border-radius: 3px;
-  color: $orange;
+  color: var(--orange);
   display: block;
   font-family: $fixed-width-font-family;
   font-variant-ligatures: none;
@@ -50,3 +51,13 @@ pre {
 .d-flex{
   display: flex;
 }
+
+#dark-mode-button {
+    grid-area: dark;
+    display: none;
+    width: 28px;
+    background-color: transparent;
+    text-decoration: none;
+    align-self: center;
+    margin: 5px;
+}

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,193 @@
+@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:         #dfddd554;
+    $button-bg-hover-color:   #fafafae5;
+    $button-color:            #{$link-color};
+    $mark-bg-color:           #ff0;
+    $mark-color:              #000;
+    $base-border-color:       #d8d7cf;
+    $callout-color:           #e9e8e0;
+    $highlight-bg-color:      #eee0b5;
+    $pre-border:              #efeee6;
+    $black-3:                 #333333;
+    $main-bg:                 #fcfcfa;
+    $main-border:             #e2e0d8;
+    $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;
+    $search-border:           #ceccc5;
+    $search-focus-border:     #007175;
+
+    @if $mode == dark {
+        $orange:                  #d7834f;
+        $blue:                    #007a7e;
+        $font-color:              #b3b1b1;
+        $aside-font-color:        darken($font-color, 10%);
+        $light-font-color:        #bdbbb0;
+        $link-color:              #d7834f;
+        $nav-link-color:          #979594;
+        $fixed-width-font-color:  #afa7a0;
+        $button-bg-hover-color:   #dfddd599;
+        $button-color:            #{$button-bg-hover-color};
+        $mark-bg-color:           #898882;
+        $mark-color:              #d2d2d2;
+        $base-border-color:       #b3b2a7;
+        $callout-color:           #555555;
+        $highlight-bg-color:      #47412d;
+        $pre-border:              #494945;
+        $black-3:                 #cccccc;
+        $main-bg:                 #333333;
+        $main-border:             #5e5e5a;
+        $bg-color:                #2a2a2aff;
+        $sidebar-bg-color:        #3d3d3a;
+        $no-changes-bg-color:     #515150;
+        $dropdown-active-bg-color: #515150;
+        $versions-footer-bg-color: #1f1f1e;
+        $search-border:           #5e5e5a;
+        $search-focus-border:     #ceccc5;
+
+        :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);
+            }
+
+            // the images in the About section would be too dark
+            body#about {
+                img:not(.no-filter) {
+                    filter: brightness(0.9) contrast(0.6) invert(1);
+                }
+
+                ol#about-nav li a {
+                    filter: brightness(0.8);
+                }
+            }
+
+            img[alt="Git"] {
+                filter: unset;
+                content: url(./images/logo.dark-mode.svg);
+            }
+
+            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);
+            }
+
+            #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);
+            }
+
+            #search-results table td.matches :is(a:hover, a.highlight) {
+                text-shadow:unset;
+            }
+
+            #reference-version {
+                background-color: #6f6e6954;
+            }
+
+            #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};
+        --button-color:                 #{$button-color};
+        --mark-bg-color:                #{$mark-bg-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};
+        --pre-border:                   #{$pre-border};
+
+        --black-3:                      #{$black-3};
+        --main-bg:                      #{$main-bg};
+        --main-border:                  #{$main-border};
+        --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};
+        --search-border:                #{$search-border};
+        --search-focus-border:          #{$search-focus-border};
+    }
+}
+
+@include mode
+@include mode($mode: dark, $theme: '[data-theme="dark"]')
+
+@media screen and (prefers-color-scheme: dark) {
+    @include mode($mode: dark, $theme: ':not([data-theme="light"])')
+    @include mode($mode: light)
+}