LAND-2: Redesign website overhaul

static/js/theme-toggle.js

@@ -0,0 +1,61 @@
+// ── Theme Toggle ──
+// Dark mode is the default. No data-theme attribute means dark mode.
+// Light mode is [data-theme="light"].
+
+(function () {
+  const STORAGE_KEY = "arcline-theme";
+  const LIGHT = "light";
+  const DARK = "dark";
+
+  function applyTheme(theme) {
+    if (theme === LIGHT) {
+      document.documentElement.setAttribute("data-theme", LIGHT);
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+  }
+
+  // Read saved preference, default to dark
+  function getSavedTheme() {
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored === LIGHT || stored === DARK) return stored;
+    } catch (_) {
+      // localStorage unavailable — ignore
+    }
+    return DARK;
+  }
+
+  function saveTheme(theme) {
+    try {
+      localStorage.setItem(STORAGE_KEY, theme);
+    } catch (_) {
+      // localStorage unavailable — ignore
+    }
+  }
+
+  // Apply the saved theme immediately (before page render)
+  const current = getSavedTheme();
+  applyTheme(current);
+
+  // Wire up toggle button(s) once the DOM is ready
+  function initToggle() {
+    const buttons = document.querySelectorAll("[data-theme-toggle]");
+    buttons.forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        const next = document.documentElement.hasAttribute("data-theme")
+          ? DARK
+          : LIGHT;
+        applyTheme(next);
+        saveTheme(next);
+      });
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initToggle);
+  } else {
+    initToggle();
+  }
+})();
+