WIP: Add a dark/light mode toggle

This button is pretty ugly at the moment. Could use some TLC by someone
who actually knows what they're doing.

Signed-off-by: Johannes Schindelin <[email protected]>

Author: dscho

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,44 @@ 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");
+
+    const body = $("body");
+    if (prefersDarkScheme) {
+      if (currentTheme === "light") {
+       body.addClass("light-mode");
+     } else {
+      button.text("🌞");
+     }
+    } else if (currentTheme === "dark") {
+      body.addClass("dark-mode");
+      button.text("🌞");
+    }
+
+    button.click(() => {
+      let theme
+      if (prefersDarkScheme) {
+        body.toggleClass("light-mode");
+        theme = body.hasClass("light-mode") ? "light" : "dark";
+      } else {
+        body.toggleClass("dark-mode");
+        theme = body.hasClass("dark-mode") ? "dark" : "light";
+      }
+      localStorage.setItem("theme", theme);
+      button.text(theme === "dark" ? "🌞" : "🌙");
+    });
+  },
+}
+
 // Scroll to Top
 $('#scrollToTop').removeClass('no-js');
 $(window).scroll(function() {

assets/sass/dark-mode.css

@@ -98,4 +98,10 @@
 @media screen and (prefers-color-scheme: dark) {
     @include mode($mode: dark)
     @include mode($mode: light, $class: ".light-mode")
+}
+
+#dark-mode-button {
+    position: absolute;
+    top: 10px;
+    right: 305px;
 }

layouts/partials/header.html

@@ -14,6 +14,7 @@
     document.getElementById('tagline').innerHTML = '--' + tagline;
   </script>
 
+  <a href="#" id="dark-mode-button" class="subtle-button" data-os="">🌙</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" />