Refactor UI assets and harden quality checks

karldns/assets/theme.js

@@ -0,0 +1,45 @@
+(() => {
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  const storageKey = "karldns-theme";
+  const systemTheme = () => (media.matches ? "dark" : "light");
+  const storedTheme = () => {
+    try {
+      return window.localStorage.getItem(storageKey);
+    } catch (_) {
+      return null;
+    }
+  };
+  const setStoredTheme = (theme) => {
+    try {
+      window.localStorage.setItem(storageKey, theme);
+    } catch (_) {}
+  };
+  const syncToggle = (theme) => {
+    document.querySelectorAll("[data-theme-toggle]").forEach((button) => {
+      const nextTheme = theme === "dark" ? "light" : "dark";
+      button.dataset.themeNext = nextTheme;
+      button.setAttribute("aria-label", `Switch to ${nextTheme.toLowerCase()} theme`);
+    });
+  };
+  const applyTheme = (requestedTheme = storedTheme() || systemTheme()) => {
+    const theme = requestedTheme === "dark" ? "dark" : "light";
+    document.documentElement.setAttribute("data-bs-theme", theme);
+    syncToggle(theme);
+    return theme;
+  };
+  applyTheme();
+  media.addEventListener("change", () => {
+    if (!storedTheme()) applyTheme();
+  });
+  document.addEventListener("DOMContentLoaded", () => {
+    syncToggle(document.documentElement.getAttribute("data-bs-theme") || "light");
+  });
+  document.addEventListener("click", (event) => {
+    const toggle = event.target.closest("[data-theme-toggle]");
+    if (!toggle) return;
+    const currentTheme = document.documentElement.getAttribute("data-bs-theme") || systemTheme();
+    const nextTheme = currentTheme === "dark" ? "light" : "dark";
+    setStoredTheme(nextTheme);
+    applyTheme(nextTheme);
+  });
+})();