Add manual theme switcher (fixes #5)

static/theme-switcher.js

@@ -0,0 +1,54 @@
+(function () {
+    // Get the default theme from the HTML data-theme attribute.
+    const defaultTheme = document.documentElement.getAttribute("data-theme");
+
+    // Set the data-default-theme attribute only if defaultTheme is not null.
+    if (defaultTheme) {
+        document.documentElement.setAttribute("data-default-theme", defaultTheme);
+    }
+
+    // Attempt to retrieve the current theme from the browser's local storage.
+    const storedTheme = localStorage.getItem("theme");
+
+    if (storedTheme && storedTheme !== "system") {
+        document.documentElement.setAttribute("data-theme", storedTheme);
+    } else if (defaultTheme && storedTheme !== "system") {
+        document.documentElement.setAttribute("data-theme", defaultTheme);
+    } else {
+        // If no theme is found in local storage and no default theme is set, CSS handles the theme.
+        document.documentElement.removeAttribute("data-theme");
+    }
+})();
+
+const defaultTheme = document.documentElement.getAttribute("data-default-theme");
+
+function setTheme(theme, saveToLocalStorage = false) {
+    if (theme === "system") {
+        document.documentElement.removeAttribute("data-theme");
+    } else {
+        document.documentElement.setAttribute("data-theme", theme);
+    }
+
+    if (saveToLocalStorage) {
+        localStorage.setItem("theme", theme);
+    } else {
+        localStorage.removeItem("theme");
+    }
+
+    // Dispatch a custom event for comment systems.
+    window.dispatchEvent(new CustomEvent("themeChanged", { detail: { theme } }));
+}
+
+function resetTheme() {
+    // Reset the theme to the default or system preference if no default is set.
+    setTheme(defaultTheme || "system");
+}
+
+// Functions connected to buttons via `onclick` attributes.
+function switchTheme(theme) {
+    if (theme === "system") {
+        resetTheme();
+    } else {
+        setTheme(theme, true);
+    }
+}