Implement dark mode toggle and persistence logic

assets/scripts/features/darkmode/index.js

@@ -0,0 +1,75 @@
+const PERSISTENCE_KEY = "darkmode:color-scheme";
+
+window.addEventListener("load", async () => {
+  const menu = document.getElementById("themeMenu");
+  const $icon = document.getElementById("navbar-theme-icon-svg");
+  if (menu == null || $icon == null) return;
+
+  const btns = menu.getElementsByTagName("a");
+  const iconMap = Array.from(btns).reduce((map, btn) => {
+    const $img = btn.getElementsByTagName("img")[0];
+    map[btn.dataset.scheme] = $img.src;
+    return map;
+  }, {});
+
+  function loadScheme() {
+    console.log("Loading theme: ", localStorage.getItem(PERSISTENCE_KEY));
+    return localStorage.getItem(PERSISTENCE_KEY) || "system";
+  }
+
+  function saveScheme(scheme) {
+    console.log("Saving theme: ", scheme);
+    localStorage.setItem(PERSISTENCE_KEY, scheme);
+  }
+
+  function getPreferredColorScheme() {
+    console.log("Getting system theme preference");
+    const isDarkMode = window.matchMedia(
+      "(prefers-color-scheme: dark)",
+    ).matches;
+    console.log("System prefers dark mode: ", isDarkMode);
+    return isDarkMode ? "dark" : "light";
+  }
+
+  function setScheme(newScheme) {
+    let theme = newScheme;
+    if (newScheme === "system") {
+      theme = getPreferredColorScheme();
+    }
+    console.log("Setting theme to: ", theme);
+    // set data-theme attribute on html tag
+    document.querySelector("html").dataset.theme = theme;
+
+    // update icon
+    $icon.src = iconMap[newScheme];
+
+    // save preference to local storage
+    saveScheme(newScheme);
+
+    setImages(theme);
+  }
+
+  setScheme(loadScheme());
+
+  Array.from(menu.getElementsByTagName("a")).forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const { scheme } = btn.dataset;
+      setScheme(scheme);
+    });
+  });
+});
+
+function setImages(newScheme) {
+  const els = Array.from(document.getElementsByClassName("logo-holder"));
+  for (const el of els) {
+    const light = el.querySelector(".light-logo");
+    const dark = el.querySelector(".dark-logo");
+    if (newScheme === "dark" && dark !== null) {
+      if (light !== null) light.style.display = "none";
+      dark.style.display = "inline";
+    } else {
+      if (light !== null) light.style.display = "inline";
+      if (dark !== null) dark.style.display = "none";
+    }
+  }
+}

assets/scripts/features/index.js

@@ -1,3 +1,4 @@
 if (process.env.FEATURE_ANALYTICS === "1") {
   import("./analytics");
 }
+import "./darkmode";

layouts/partials/comments/bluesky.html

@@ -1,3 +1,3 @@
-{{ $script := resources.Get "scripts/bsky.js" }}
+<!-- {{ $script := resources.Get "scripts/bsky.js" }}
 <script src="{{ $script.RelPermalink }}" integrity="{{ $script.Data.Integrity }}"></script>
-<div id="bluesky">Comments From Bluesky Social: </div>
+<div id="bluesky">Comments From Bluesky Social: </div> -->

layouts/partials/sections/home.html

@@ -20,10 +20,10 @@
 {{ $backgroundImage = site.Params.background }}
 {{ end }}
 
-{{ $darkBackgroundImage:= $backgroundImage }}
+<!-- {{ $darkBackgroundImage:= $backgroundImage }}
 {{ if site.Params.darkBackground }}
 {{ $darkBackgroundImage = site.Params.darkBackground }}
-{{ end }}
+{{ end }} -->
 
 {{ $authorImage:= "/images/default-avatar.png" }}
 {{ if $author.image }}