Deploy static theme toggle script

TaskTrackingSystem.WebApp/Components/App.razor

@@ -325,6 +325,7 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="TaskTrackingSystem.WebApp.styles.css" />
     <link rel="stylesheet" href="app.css" />
+    <script src="theme-toggle.js?v=20260720-2" defer></script>
     <script src="https://code.highcharts.com/highcharts.js"></script>
     <script src="https://code.highcharts.com/gantt/modules/gantt.js"></script>
     <script src="https://unpkg.com/lucide@latest"></script>

TaskTrackingSystem.WebApp/Components/Partial/ThemeToggle.razor

@@ -1,7 +1,6 @@
 <button type="button"
         class="control-button"
         data-theme-toggle
-        onclick="return window.toggleTaskifyThemeButton && window.toggleTaskifyThemeButton(this);"
         title="Switch to dark mode"
         aria-label="Switch to dark mode"
         aria-pressed="false">

TaskTrackingSystem.WebApp/wwwroot/theme-toggle.js

@@ -0,0 +1,104 @@
+(function () {
+    const storageKey = "tts-theme";
+
+    function normalize(theme) {
+        return theme === "dark" || theme === "light" ? theme : "light";
+    }
+
+    function currentTheme() {
+        return normalize(
+            document.documentElement.dataset.theme ||
+            (document.documentElement.classList.contains("dark") ? "dark" : "light")
+        );
+    }
+
+    function setTheme(theme) {
+        const normalized = normalize(theme);
+        const isDark = normalized === "dark";
+        const root = document.documentElement;
+
+        root.classList.toggle("dark", isDark);
+        root.dataset.theme = normalized;
+
+        if (document.body) {
+            document.body.classList.toggle("dark", isDark);
+            document.body.dataset.theme = normalized;
+        }
+
+        try {
+            localStorage.setItem(storageKey, normalized);
+        } catch {
+        }
+
+        updateControls();
+        return isDark;
+    }
+
+    function updateControls() {
+        const isDark = currentTheme() === "dark";
+        const title = isDark ? "Switch to light mode" : "Switch to dark mode";
+        const iconName = isDark ? "sun" : "moon";
+
+        document.querySelectorAll("[data-theme-toggle]").forEach(button => {
+            button.setAttribute("aria-pressed", String(isDark));
+            button.setAttribute("aria-label", title);
+            button.setAttribute("title", title);
+
+            const icon = button.querySelector("[data-lucide]");
+            if (icon) {
+                icon.setAttribute("data-lucide", iconName);
+            }
+        });
+
+        if (window.lucide) {
+            window.lucide.createIcons();
+        }
+    }
+
+    function initTheme() {
+        let storedTheme = "light";
+        try {
+            storedTheme = normalize(localStorage.getItem(storageKey));
+        } catch {
+        }
+
+        setTheme(storedTheme);
+    }
+
+    window.themePreference = {
+        apply: setTheme,
+        init: initTheme,
+        toggle() {
+            return setTheme(currentTheme() === "dark" ? "light" : "dark");
+        }
+    };
+
+    window.updateTaskifyThemeControls = updateControls;
+    window.toggleTaskifyThemeButton = function () {
+        window.themePreference.toggle();
+        return false;
+    };
+
+    if (!window.__taskifyThemeToggleBound) {
+        window.__taskifyThemeToggleBound = true;
+        document.addEventListener("click", event => {
+            const target = event.target instanceof Element ? event.target : event.target?.parentElement;
+            const button = target?.closest("[data-theme-toggle]");
+            if (!button) {
+                return;
+            }
+
+            event.preventDefault();
+            event.stopPropagation();
+            window.themePreference.toggle();
+        }, true);
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", initTheme, { once: true });
+    } else {
+        initTheme();
+    }
+
+    window.addEventListener("pageshow", updateControls);
+})();