diff --git a/assets/js/application.js b/assets/js/application.js
index 0610b18cb5..87577a18aa 100644
--- a/assets/js/application.js
+++ b/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() {
diff --git a/assets/sass/application.scss b/assets/sass/application.scss
index 9509993b44..20021b22e6 100644
--- a/assets/sass/application.scss
+++ b/assets/sass/application.scss
@@ -27,6 +27,7 @@ $baseurl: "{{ .Site.BaseURL }}{{ if (and (ne .Site.BaseURL "/") (ne .Site.BaseUR
 @import 'book2';
 @import 'lists';
 @import 'about';
+@import 'dark-mode';
 
 code {
   display: inline;
@@ -34,10 +35,10 @@ code {
 }
 
 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;
diff --git a/assets/sass/book.scss b/assets/sass/book.scss
index 2fad1c671f..8f9f926c6a 100644
--- a/assets/sass/book.scss
+++ b/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);
           }
         }
       }
diff --git a/assets/sass/dark-mode.css b/assets/sass/dark-mode.css
new file mode 100644
index 0000000000..6bb746558d
--- /dev/null
+++ b/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;
+}
diff --git a/assets/sass/downloads.scss b/assets/sass/downloads.scss
index 11dd4e2236..14ddc6784e 100644
--- a/assets/sass/downloads.scss
+++ b/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 {
diff --git a/assets/sass/errors.scss b/assets/sass/errors.scss
index eb3d6226c0..9ba433b097 100644
--- a/assets/sass/errors.scss
+++ b/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);
         }
       }
     }
diff --git a/assets/sass/forms.scss b/assets/sass/forms.scss
index 847ac5766c..a7ce57f2ac 100644
--- a/assets/sass/forms.scss
+++ b/assets/sass/forms.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 \::-webkit-input-placeholder {
   color: #9a9994 !important;
@@ -15,7 +14,7 @@ input.inactive {
 }
 
 input.active {
-  color: $font-color !important;
+  color: var(--font-color) !important;
 }
 
 input, textarea {
@@ -39,7 +38,7 @@ form#search {
   width: 262px;
   padding-left: 32px;
   @include background-image-2x($baseurl + "images/icons/search", 17px, 17px, 10px 50%);
-  background-color: $main-bg !important;
+  background-color: var(--main-bg) !important;
   border: solid 1px #ceccc5;
   @include border-radius(20px);
   @include box-shadow(inset 0 1px 4px #ddd);
@@ -51,14 +50,14 @@ form#search {
     margin-top: 4px;
     margin-bottom: 2px;
     line-height: 1em;
-    color: $font-color;
+    color: var(--font-color);
     background-color: transparent;
     border: 0;
   }
 
   &.focus {
     border-color: #007175;
-    background-color: #fff;
+    background-color: var(--main-bg);
   }
 }
 
diff --git a/assets/sass/front-page.scss b/assets/sass/front-page.scss
index f35f397d5d..a7e7725231 100644
--- a/assets/sass/front-page.scss
+++ b/assets/sass/front-page.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 #front-content {
   @include clearfix;
@@ -10,7 +9,7 @@
     float: left;
     width: 618px;
     margin-bottom: 24px;
-    border-right: solid 1px $base-border-color;
+    border-right: solid 1px var(--base-border-color);
   }
 }
 
@@ -43,7 +42,7 @@
     display: block;
     height: 86px;
     padding-left: 90px;
-    color: $font-color;
+    color: var(--font-color);
     background-repeat: no-repeat;
     background-position: 0 0;
     transition-duration: 0.3s;
@@ -61,7 +60,7 @@
     h3 {
       font-size: 18px;
       font-weight: bold;
-      color: $orange;
+      color: var(--orange);
     }
 
     p {
@@ -76,7 +75,7 @@
     }
 
     h3 {
-      color: darken($orange, 5%);
+      color: var(--orange-darker-5);
     }
   }
 }
@@ -85,7 +84,7 @@
   float: left;
   width: 590px;
   padding-top: 20px;
-  border-top: solid 1px $base-border-color;
+  border-top: solid 1px var(--base-border-color);
 
   img {
     float: left;
@@ -133,12 +132,12 @@ $monitor-height: 271px;
   height: $monitor-height - 45;
   padding-top: 45px;
   padding-left: 40px;
-  color: #fff;
+  color: var(--main-bg);
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
 
   h4 {
     font-weight: normal;
-    color: #fff;
+    color: var(--main-bg);
     font-size: 16px;
   }
 
@@ -167,7 +166,7 @@ $monitor-height: 271px;
     padding: 5px 0;
     margin-top: 10px;
     font-size: 16px;
-    color: #fff;
+    color: var(--main-bg);
     text-align: center;
     background-image: linear-gradient(#1c868c, #186368);
     border-top: solid 1px #085e64;
@@ -203,7 +202,7 @@ $monitor-height: 271px;
 #companies-projects {
   padding-top: 20px;
   clear: both;
-  border-top: solid 1px $base-border-color;
+  border-top: solid 1px var(--base-border-color);
 
   ul {
     @extend .unstyled !optional;
@@ -395,7 +394,7 @@ a.icon {
       }
     }
     #front-downloads {
-      border-bottom: 1px solid $base-border-color;
+      border-bottom: 1px solid var(--base-border-color);
       margin-bottom: 2rem;
       padding-bottom: 1rem;
       .monitor, table {
diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss
index b32c661e16..3b5d7ccc4f 100644
--- a/assets/sass/layout.scss
+++ b/assets/sass/layout.scss
@@ -7,8 +7,8 @@ body {
   font-family: $base-font-family;
   font-size: $base-font-size;
   line-height: $base-line-height;
-  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
@@ -40,7 +40,7 @@ aside {
 #main {
   padding: 22px;
   margin-bottom: 35px;
-  background-color: $main-bg;
+  background-color: var(--main-bg);
   border: solid 1px #e2e0d8;
   @include border-radius(5px);
 
@@ -59,7 +59,7 @@ aside {
   }
 
   .callout {
-    background-color: $callout-color;
+    background-color: var(--callout-color);
     @include border-radius(3px);
     padding: 8px 14px 4px;
     margin-bottom: 1.4em;
@@ -122,7 +122,7 @@ header {
     margin-top: 1px;
     font-size: 24px;
     line-height: 24px;
-    color: $light-font-color;
+    color: var(--light-font-color);
 
     em {
       letter-spacing: 1px;
@@ -142,10 +142,10 @@ aside nav ul {
     margin-bottom: 0.5em;
 
     a {
-      color: #413932;
+      color: var(--nav-link-color);
 
       &.active, &:hover {
-        color: $orange;
+        color: var(--orange);
       }
     }
 
@@ -208,7 +208,7 @@ p.center {
   p {
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 
   p + p {
@@ -222,12 +222,12 @@ p.center {
 }
 
 .callout.downloading {
-  background: $callout-color url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
+  background: var(--callout-color) url($baseurl + "images/icons/download.png") 24px 24px no-repeat;
   padding: 20px 30px 20px 100px !important;
 
   h3 {
     font-size: 18px;
-    color: $orange;
+    color: var(--orange);
   }
 
   p {
@@ -240,7 +240,7 @@ p.center {
     margin-bottom: 0 !important;
     font-size: 12px;
     line-height: 1.4;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 }
 
@@ -298,10 +298,10 @@ a.dropdown-trigger {
   &.active {
     position: relative;
     z-index: 200;
-    background-color: #fff !important;
+    background-color: var(--dropdown-active-bg-color) !important;
     @include border-top-left-radius(3px);
     @include border-top-right-radius(3px);
-    border: solid 1px darken($base-border-color, 8%);
+    border: solid 1px var(--base-border-color-darker-8);
     border-bottom: 0;
   }
 }
@@ -310,8 +310,8 @@ a.dropdown-trigger {
   position: absolute;
   z-index: 199;
   display: none;
-  background-color: #fff;
-  border: solid 1px darken($base-border-color, 8%);
+  background-color: var(--main-bg);
+  border: solid 1px var(--base-border-color-darker-8);
   @include border-radius(3px);
   @include box-shadow(0 1px 2px #ccc);
 
@@ -332,14 +332,14 @@ footer {
   @include clearfix;
   font-size: 12px;
   line-height: $base-line-height * 0.7;
-  color: $light-font-color;
-  border-top: solid 1px $base-border-color;
+  color: var(--light-font-color);
+  border-top: solid 1px var(--base-border-color);
 
   a {
-    color: darken($light-font-color, 35%);
+    color: var(--light-font-color-darker-35);
 
     &:hover {
-      color: darken($light-font-color, 55%);
+      color: var(--light-font-color-darker-55);
     }
   }
 
@@ -385,7 +385,7 @@ table.benchmarks {
   @include border-radius(50px);
   display: none;
   position: fixed;
-  background-color: rgba(223, 221, 213, 0.33);
+  background-color: var(--button-bg-color);
   right: 20px;
   bottom: 6.25rem;
   padding: 0.8rem;
@@ -393,7 +393,7 @@ table.benchmarks {
   transition: background-color 0.2s;
   width: 20px;
   &:hover{
-    background-color: rgba(250, 250, 250, 0.9);
+    background-color: var(--button-bg-hover-color);
     @include box-shadow(2px);
     &::before {
       @include center-transformX;
@@ -402,7 +402,7 @@ table.benchmarks {
       color: var(--color-neutral-emphasis-plus);
       content: "";
       border: 6px solid transparent;
-      border-color:$black-3 transparent transparent;
+      border-color:var(--black-3) transparent transparent;
       top: -0.55rem;
       position: absolute;
     }
@@ -415,8 +415,8 @@ table.benchmarks {
       word-wrap: break-word;
       white-space: pre;
       padding: .5em .75em;
-      color:$callout-color;
-      background-color:$black-3;
+      color:var(--callout-color);
+      background-color:var(--black-3);
       font: normal normal 11px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
     }
   }
diff --git a/assets/sass/lists.scss b/assets/sass/lists.scss
index 0276070a88..5a028bc59e 100644
--- a/assets/sass/lists.scss
+++ b/assets/sass/lists.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 .content-list {
   @extend .unstyled !optional;
@@ -28,7 +27,7 @@ ul.gui-thumbnails {
       display: block;
       padding: 3px;
       margin-bottom: 5px;
-      border: solid 1px $base-border-color;
+      border: solid 1px var(--base-border-color);
     }
   }
 }
@@ -97,13 +96,13 @@ ol#about-nav {
       font-size: 13px;
       line-height: 20px;
       text-align: center;
-      color: $font-color;
+      color: var(--light-font-color-darker-35);
       opacity: 0.9;
       @include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px);
 
       &.current {
         @include background-image-2x($baseurl + "images/icons/nav-circles", 90px, 180px, 0 -90px);
-        color: #fff;
+        color: var(--main-bg);
         opacity: 1;
       }
 
@@ -145,14 +144,14 @@ ul.stackoverflow {
 
   span {
     display: block;
-    color: $light-font-color;
+    color: var(--light-font-color);
 
     strong {
-      color: darken($light-font-color, 10%);
+      color: var(--light-font-color-darker-10);
     }
 
     em {
-      color: lighten($light-font-color, 20%);
+      color: var(--light-font-color-lighter-20);
     }
   }
 }
diff --git a/assets/sass/man-pages.scss b/assets/sass/man-pages.scss
index 6c7431333f..b3999b92a8 100644
--- a/assets/sass/man-pages.scss
+++ b/assets/sass/man-pages.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 #documentation #main {
   p {
@@ -9,7 +8,7 @@
       font-variant-ligatures: none;
       font-style: normal;
       font-weight: bold;
-      color: $fixed-width-font-color;
+      color: var(--fixed-width-font-color);
     }
 
     tt {
@@ -48,7 +47,7 @@
       font-family: $fixed-width-font-family !important;
       line-height: $fixed-width-line-height;
       font-variant-ligatures: none;
-      color: $fixed-width-font-color;
+      color: var(--fixed-width-font-color);
       word-wrap: break-word;       /* Internet Explorer 5.5+ */
       white-space: pre;
       white-space: pre-wrap;       /* css-3 */
@@ -72,11 +71,11 @@
   .quoteblock {
     padding-left: 1em;
     margin-left: 1em;
-    border-left: 5px solid $base-border-color;
+    border-left: 5px solid var(--base-border-color);
 
     .content {
       .paragraph p {
-        color: $light-font-color;
+        color: var(--light-font-color);
       }
     }
   }
@@ -90,17 +89,17 @@
 
         .title {
           font-weight: bold;
-          color: $orange;
+          color: var(--orange);
         }
 
         &:first-child {
-          border-right: solid 2px $base-border-color;
+          border-right: solid 2px var(--base-border-color);
         }
       }
     }
   }
 
   #footer {
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 }
diff --git a/assets/sass/mixins.scss b/assets/sass/mixins.scss
index b3f470c03b..9c07d9e3f7 100644
--- a/assets/sass/mixins.scss
+++ b/assets/sass/mixins.scss
@@ -82,7 +82,7 @@
 }
 
 @mixin responsive-sidebar-ui {
-  background-color: #efefe7;
+  background-color: var(--sidebar-bg-color);
   z-index: 305;
   left: 0;
   box-shadow: 6px 2px 8px 0px rgba(28,28,28,0.10%);
diff --git a/assets/sass/normalize.scss b/assets/sass/normalize.scss
index 57fc51f2d0..4394dccb66 100644
--- a/assets/sass/normalize.scss
+++ b/assets/sass/normalize.scss
@@ -141,7 +141,7 @@ h1 {
  */
 
 mark {
-  background: #ff0;
+  background: var(--mark-color);
   color: #000;
 }
 
diff --git a/assets/sass/reference.scss b/assets/sass/reference.scss
index b5ce0ad60b..4873a402c8 100644
--- a/assets/sass/reference.scss
+++ b/assets/sass/reference.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 .topics h3, .topics ul li {
   padding-left: 23px;
@@ -131,8 +130,8 @@ h3.plumbing {
     margin-top: 0;
     font-size: 11px;
     font-weight: normal;
-    color: $font-color;
-    background-color: #eae9e0;
+    color: var(--font-color);
+    background-color: var(--versions-footer-bg-color);
     @include border-bottom-left-radius(3px);
     @include border-bottom-right-radius(3px);
 
@@ -141,7 +140,7 @@ h3.plumbing {
       // for <p> at the beginning of "typography.scss".
       all: unset;
       display: block;
-      color: $light-font-color;
+      color: var(--light-font-color);
     }
   }
 }
@@ -257,7 +256,7 @@ ol.reference-previous-versions {
         font-size: 11px;
         font-style: normal;
         font-weight: normal;
-        color: $light-font-color;
+        color: var(--light-font-color);
       }
 
       &.more {
@@ -276,7 +275,7 @@ ol.reference-previous-versions {
       font-size: 11px;
       font-weight: normal;
       line-height: 1.2;
-      color: $light-font-color;
+      color: var(--light-font-color);
       text-align: center;
 
       span {
@@ -286,7 +285,7 @@ ol.reference-previous-versions {
         @include border-bottom-left-radius(10px);
         font-size: 10px;
         font-style: italic;
-        background-color: #f5f5f3;
+        background-color: var(--no-changes-bg-color);
       }
     }
   }
@@ -313,7 +312,7 @@ ol.reference-previous-versions {
 .callout.ref-manual {
   @include background-image-2x($baseurl + "images/icons/book", 54px, 72px, 24px 20px);
   padding: 20px 30px 20px 100px !important;
-  background-color: $callout-color;
+  background-color: var(--callout-color);
   iframe {
     max-width: 100%;
   }
@@ -352,7 +351,7 @@ p.quickref {
 #video-container {
   padding: 10px 10px 2px;
   margin-bottom: 20px;
-  background-color: $callout-color;
+  background-color: var(--callout-color);
 }
 
 code.command {
diff --git a/assets/sass/search.scss b/assets/sass/search.scss
index a30023991e..ed52904cae 100644
--- a/assets/sass/search.scss
+++ b/assets/sass/search.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 #search-results {
   position: absolute;
@@ -12,7 +11,7 @@
   background: #398a94 url($baseurl + "images/bg/search-header.jpg") 0 1px repeat-x;
   @include border-radius(3px);
   @include box-shadow(0 0 7px rgba(0, 0, 0, 0.25));
-  border-bottom: solid 1px $base-border-color;
+  border-bottom: solid 1px var(--base-border-color);
 
   header {
     height: 44px;
@@ -27,7 +26,7 @@
   table {
     width: 100%;
     line-height: 1;
-    background-color: #fff;
+    background-color: var(--main-bg);
     @include border-bottom-right-radius(3px);
     @include border-bottom-left-radius(3px);
 
@@ -39,7 +38,7 @@
       width: 67px;
       padding: 10px 12px 0 0;
       font-size: 11px;
-      color: $blue;
+      color: var(--blue);
       text-align: right;
       vertical-align: top;
       background-color: #f5fbfb;
@@ -56,18 +55,18 @@
         padding: 5px 12px;
         margin-bottom: 0;
         font-weight: bold;
-        color: $font-color;
+        color: var(--font-color);
         transition-duration: 0s;
 
         &:hover,
         &.highlight {
-          color: #fff;
+          color: var(--main-bg);
           text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
           background: #55bec4;
           background-image: linear-gradient(#55bec4, #54b2b7);
 
           span {
-            color: #fff;
+            color: var(--main-bg);
           }
         }
       }
@@ -116,10 +115,10 @@ ol.full-search-results {
     display: block;
     margin-bottom: 0.4em;
     font-size: 12px;
-    color: $light-font-color;
+    color: var(--light-font-color);
 
     &:hover {
-      color: darken($light-font-color, 25%);
+      color: var(--light-font-color-darker-25);
     }
   }
 }
@@ -146,13 +145,13 @@ ol.full-search-results {
 
 // Search results page
 #search-div {
-  border: solid 1px $base-border-color;
-  background: $main-bg;
+  border: solid 1px var(--base-border-color);
+  background: var(--main-bg);
   padding: 22px;
   @include border-radius(5px);
 
   ol {
-    background-color: $callout-color;
+    background-color: var(--callout-color);
     @include border-radius(3px);
     padding: 8px 14px 4px;
     margin: 0 0 1.4em;
@@ -168,16 +167,16 @@ ol.full-search-results {
 
   .pagefind-ui__result-tags {
     list-style: none;
-    color: $light-font-color;
+    color: var(--light-font-color);
     margin-bottom: 1.4em;
     margin-left: 0;
   }
 }
 
 button {
-  border-color: $link-color;
-  color: $link-color;
-  background: $callout-color;
+  border-color: var(--link-color);
+  color: var(--link-color);
+  background: var(--callout-color);
   font-weight: bold;
   @include border-radius(3px);
   outline: none;
diff --git a/assets/sass/sidebar.scss b/assets/sass/sidebar.scss
index caeb49fde2..5e11230c53 100644
--- a/assets/sass/sidebar.scss
+++ b/assets/sass/sidebar.scss
@@ -1,6 +1,5 @@
 @import "variables";
 @import "mixins";
-@import "layout";
 
 hr.sidebar {
   width: 218px;
@@ -20,7 +19,7 @@ aside.sidebar {
 
   .callout {
     padding: 20px;
-    color: lighten($font-color, 20%);
+    color: var(--aside-font-color);
     background-color: #ebe9e1;
     background-color: rgba(223, 221, 213, 0.33);
     @include border-radius(3px);
@@ -44,7 +43,7 @@ aside.sidebar.active {
     @include background-image-2x($baseurl + "images/icons/sidebar", 24px, 24px, left center);
     @include border-top-right-radius(5px);
     @include border-bottom-right-radius(5px);
-    background-color: $black-3 !important;
+    background-color: var(--black-3) !important;
     display: block;
     position: fixed;
     padding: 2rem 0rem;
diff --git a/assets/sass/typography.scss b/assets/sass/typography.scss
index 5e8a840906..07b39817d6 100644
--- a/assets/sass/typography.scss
+++ b/assets/sass/typography.scss
@@ -11,12 +11,12 @@ p {
 
   small {
     font-size: $base-font-size - 2;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 }
 
 a {
-  color: $link-color;
+  color: var(--link-color);
   text-decoration: none;
   transition-duration: 0.3s;
   transition-property: color;
@@ -33,12 +33,12 @@ h5,
 h6 {
   margin: 0;
   font-weight: normal;
-  color: $font-color;
+  color: var(--font-color);
   text-rendering: optimizelegibility; // Fix the character spacing for headings
 
   small {
     font-weight: normal;
-    color: $light-font-color;
+    color: var(--light-font-color);
   }
 }
 
@@ -57,7 +57,7 @@ h2 {
   font-size: 18px;
   font-weight: bold;
   line-height: $base-line-height * 2;
-  color: $orange;
+  color: var(--orange);
 
   small {
     font-size: 18px;
@@ -95,7 +95,7 @@ h4 {
 
 aside h4 {
   margin-bottom: 1em;
-  color: $light-font-color;
+  color: var(--light-font-color);
   line-height: 1.4;
 }
 
@@ -105,7 +105,7 @@ h5 {
 
 h6 {
   font-size: 11px;
-  color: $light-font-color;
+  color: var(--light-font-color);
   text-transform: uppercase;
 }
 
@@ -188,7 +188,7 @@ dd {
 hr {
   margin: $base-line-height 0;
   border: 0;
-  border-top: 1px solid $base-border-color;
+  border-top: 1px solid var(--base-border-color);
 }
 
 // Emphasis
@@ -201,7 +201,7 @@ em {
 }
 
 .muted {
-  color: $light-font-color;
+  color: var(--light-font-color);
 }
 
 // Abbreviations and acronyms
@@ -219,7 +219,7 @@ abbr.initialism {
 blockquote {
   padding: 0 0 0 15px;
   margin: 0 0 $base-line-height;
-  border-left: 5px solid $base-border-color;
+  border-left: 5px solid var(--base-border-color);
 
   p {
     margin-bottom: 0;
@@ -228,7 +228,7 @@ blockquote {
   small {
     display: block;
     line-height: $base-line-height;
-    color: $light-font-color;
+    color: var(--light-font-color);
 
     &:before {
       content: '\2014 \00A0';
@@ -240,7 +240,7 @@ blockquote {
     float: right;
     padding-right: 15px;
     padding-left: 0;
-    border-right: 5px solid $base-border-color;
+    border-right: 5px solid var(--base-border-color);
     border-left: 0;
 
     p,
@@ -259,8 +259,8 @@ code {
   font-family: $fixed-width-font-family;
   line-height: $fixed-width-line-height;
   font-variant-ligatures: none;
-  color: $orange;
-  background-color: #fff;
+  color: var(--orange);
+  background-color: var(--main-bg);
   border: solid 1px #efeee6;
 }
 
@@ -292,7 +292,7 @@ table {
     th,
     td {
       padding: 2px 0;
-      border-bottom: solid 1px lighten($base-border-color, 10%);
+      border-bottom: solid 1px var(--base-border-color-lighter-10);
     }
   }
 
@@ -303,13 +303,13 @@ table {
 
   td.compare {
     font-weight: bold;
-    color: $orange;
+    color: var(--orange);
   }
 }
 
 // Misc
 .light {
-  color: $light-font-color;
+  color: var(--light-font-color);
 }
 
 small {
@@ -336,7 +336,7 @@ a.subtle-button {
   transition-property: background-image;
 
   &:hover {
-    color: $link-color;
+    color: var(--link-color);
     background-image: linear-gradient(#edede3, #e6e5db);
   }
 }
@@ -359,7 +359,7 @@ div.more {
 }
 
 .highlight {
-  background-color: #eee0b5;
+  background-color: var(--highlight-bg-color);
   padding: 2px;
 }
 
diff --git a/assets/sass/variables.scss b/assets/sass/variables.scss
index b8d27afd10..abe1d147f6 100644
--- a/assets/sass/variables.scss
+++ b/assets/sass/variables.scss
@@ -1,7 +1,3 @@
-// Palette
-$orange:             #f14e32;
-$blue:               #009099;
-
 // breakpoints
 $mobile-xs: 480px;
 $mobile-s: 576px;
@@ -10,26 +6,10 @@ $tablet: 768px;
 $default:  940px;
 $page-width: $default;
 
-$font-color:  		   #4e443c;
-$light-font-color:   #9a9994;
-
-$link-color:         #0388a6;
-$link-hover-color:   lighten($link-color, 10%);
-$link-focus-color:   false;
-$link-active-color:  false;
-$link-visited-color: false;
-
 $base-font-family-fallback: Roboto Slab, DejaVu Serif, Georgia, Times New Roman, sans-serif;
 $base-font-family: Adelle, $base-font-family-fallback;
 $base-font-size:   14px;
 $base-line-height: 22px;
 
 $fixed-width-font-family: Courier, monospace;
-$fixed-width-font-color: #4e443c;
-$fixed-width-line-height: 18px;
-
-$base-border-color:  #d8d7cf;
-$callout-color:      #e9e8e0;
-
-$black-3 : #333333;
-$main-bg: #fcfcfa;
+$fixed-width-line-height: 18px;
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 300f8881f3..5aa40377ff 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -42,8 +42,20 @@ <h1>Redirecting&hellip;</h1>
 {{ warnf "No section found in %s" (.Page.Path | jsonify) }}
 {{ end }}
 {{ .Scratch.Set "section" $section }}
-
 <head>
+  <script type="text/javascript">
+    // Check for stored user dark/light mode preference, if any
+    const currentTheme = localStorage.getItem("theme")
+    if (currentTheme) {
+      // Check dark mode preference at the OS level
+      const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches
+      if ((prefersDarkScheme && currentTheme === "light")
+        || (!prefersDarkScheme && currentTheme === "dark")) {
+	document.documentElement.dataset.theme = currentTheme
+      }
+    }
+  </script>
+
   <meta charset='utf-8'>
   <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -52,10 +64,8 @@ <h1>Redirecting&hellip;</h1>
 
   <link href="{{ relURL "favicon.ico" }}" rel='shortcut icon' type='image/x-icon'>
 
-  {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass | resources.Minify }}
+  {{ $style := resources.Get "sass/application.scss" | resources.ExecuteAsTemplate "application.scss" . | css.Sass }}
   <link rel="stylesheet" href="{{ $style.RelPermalink }}">
-  <script src="{{ relURL "js/modernizr.js" }}"></script>
-  <script src="{{ relURL "js/modernize.js" }}"></script>
   <!--[if (gte IE 6)&(lte IE 8)]>
   <script src="{{ relURL "js/selectivizr-min.js" }}"></script>
   <![endif]-->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 25b3f88191..87cd3f4151 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -15,6 +15,8 @@
 <script src="{{ relURL "js/jquery-ui-1.8.18.custom.min.js" }}"></script>
 <script src="{{ relURL "js/jquery.defaultvalue.js" }}"></script>
 <script src="{{ relURL "js/session.min.js" }}"></script>
+<script src="{{ relURL "js/modernizr.js" }}"></script>
+<script src="{{ relURL "js/modernize.js" }}"></script>
 {{ if eq (.Scratch.Get "section") "search" }}<script src="{{ relURL "pagefind/pagefind-ui.js" }}"></script>{{ end }}
-{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . | resources.Minify }}
+{{ $js := resources.Get "js/application.js" | resources.ExecuteAsTemplate "js/application.js" . }}
 <script src="{{ $js.RelPermalink }}"></script>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index eae2f28016..8fb7a498cb 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -14,6 +14,7 @@
     document.getElementById('tagline').innerHTML = '--' + tagline;
   </script>
 
+  <a href="#" id="dark-mode-button">🌙</a>
   {{ if ne (.Scratch.Get "section") "search" }}
   <form id="search" action="{{ relURL "search/results" }}">
     <input id="search-text" name="search" placeholder="Type / to search entire site…" autocomplete="off" type="text" />