🐛 fix: properly initialise `currentTheme`

The `currentTheme` variable is now properly initialized when setting
the initial theme, which fixes the "extra click" issue observed when system preference
is `dark` and there's no saved theme in localStorage.

Also minifies the themeSwitcher.

Fixes #94

static/js/themeSwitcher.js

@@ -1,33 +1,37 @@
 // Get the theme switcher button element.
 const themeSwitcher = document.querySelector(".theme-switcher");
 
-// Retrieve theme from localStorage.
+// Retrieve theme from either the localStorage or the data-theme attribute on the document element.
-let currentTheme = localStorage.getItem("theme");
+let currentTheme = localStorage.getItem("theme") || document.documentElement.getAttribute('data-theme');
 
-// Function to switch between dark and light themes.
+// Function to set theme
-function setTheme(theme) {
+function setTheme(theme, saveToLocalStorage = false) {
     document.documentElement.setAttribute("data-theme", theme);
-    localStorage.setItem("theme", theme);
+    currentTheme = theme;
+
+    if (saveToLocalStorage) {
+        localStorage.setItem("theme", theme);
+    }
 
-    // Dispatch a custom event for comment systems.
+    // Dispatch a custom event for utterances and giscus.
     const event = new CustomEvent("themeChanged", {
         detail: { theme: theme }
     });
     window.dispatchEvent(event);
 }
 
+// Function to switch between dark and light themes.
 function switchTheme() {
     // Set the new theme based on the current theme.
     const newTheme = currentTheme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
+    setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
 }
 
+// Initialize the theme switcher button.
 themeSwitcher.addEventListener("click", switchTheme, false);
 
 // Update the theme based on system preference if the user hasn't manually changed the theme.
 window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-    if (!localStorage.getItem("theme")) {
+    const newTheme = e.matches ? "dark" : "light";
-        const newTheme = e.matches ? "dark" : "light";
+    setTheme(newTheme);
-        setTheme(newTheme);
-    }
 });

static/js/themeSwitcher.min.js

@@ -1,37 +1 @@
-// Get the theme switcher button element.
+const themeSwitcher=document.querySelector(".theme-switcher");let currentTheme=localStorage.getItem("theme")||document.documentElement.getAttribute("data-theme");function setTheme(e,t=!1){document.documentElement.setAttribute("data-theme",e),currentTheme=e,t&&localStorage.setItem("theme",e);t=new CustomEvent("themeChanged",{detail:{theme:e}});window.dispatchEvent(t)}function switchTheme(){setTheme("dark"===currentTheme?"light":"dark",!0)}themeSwitcher.addEventListener("click",switchTheme,!1),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",e=>{setTheme(e.matches?"dark":"light")});
-const themeSwitcher = document.querySelector(".theme-switcher");
-
-// Retrieve theme from localStorage.
-let currentTheme = localStorage.getItem("theme");
-
-// Function to set theme
-function setTheme(theme, saveToLocalStorage = false) {
-    document.documentElement.setAttribute("data-theme", theme);
-    currentTheme = theme;
-
-    if (saveToLocalStorage) {
-        localStorage.setItem("theme", theme);
-    }
-
-    // Dispatch a custom event for utterances and giscus.
-    const event = new CustomEvent("themeChanged", {
-        detail: { theme: theme }
-    });
-    window.dispatchEvent(event);
-}
-
-// Function to switch between dark and light themes.
-function switchTheme() {
-    // Set the new theme based on the current theme.
-    const newTheme = currentTheme === "dark" ? "light" : "dark";
-    setTheme(newTheme, true); // Save the theme to localStorage when the user changes it.
-}
-
-// Initialize the theme switcher button.
-themeSwitcher.addEventListener("click", switchTheme, false);
-
-// Update the theme based on system preference if the user hasn't manually changed the theme.
-window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => {
-    const newTheme = e.matches ? "dark" : "light";
-    setTheme(newTheme);
-});