feat(frontend): add theme switcher with light dark and system modes

frontend/static/js/main.js

@@ -1,8 +1,152 @@
 // UnitForge Main JavaScript
 // Handles general functionality across the application
 
+class ThemeManager {
+    constructor() {
+        this.storageKey = 'unitforge-theme';
+        this.themeToggleButton = document.querySelector('[data-theme-toggle]');
+        this.themeLabel = document.querySelector('[data-theme-label]');
+        this.themeIcon = document.querySelector('[data-theme-icon]');
+        this.themeOptions = Array.from(document.querySelectorAll('[data-theme-option]'));
+        this.metaThemeColor = document.querySelector('meta[name="theme-color"]');
+        this.mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        this.iconMap = {
+            light: 'fa-sun',
+            dark: 'fa-moon',
+            system: 'fa-circle-half-stroke'
+        };
+        this.labelMap = {
+            light: 'Light',
+            dark: 'Dark',
+            system: 'System'
+        };
+        this.currentTheme = 'system';
+
+        this.init();
+    }
+
+    init() {
+        const storedTheme = this.getStoredTheme();
+        this.applyTheme(storedTheme, false);
+        this.attachEvents();
+    }
+
+    getStoredTheme() {
+        try {
+            const stored = localStorage.getItem(this.storageKey);
+            return this.normalizeTheme(stored);
+        } catch (error) {
+            console.warn('Theme preference unavailable:', error);
+            return 'system';
+        }
+    }
+
+    normalizeTheme(value) {
+        return value === 'light' || value === 'dark' ? value : 'system';
+    }
+
+    attachEvents() {
+        this.themeOptions.forEach((option) => {
+            option.addEventListener('click', (event) => {
+                event.preventDefault();
+                const selection = this.normalizeTheme(option.dataset.themeOption);
+                this.applyTheme(selection);
+            });
+        });
+
+        const handleChange = () => this.handleSystemPreferenceChange();
+        if (typeof this.mediaQuery.addEventListener === 'function') {
+            this.mediaQuery.addEventListener('change', handleChange);
+        } else if (typeof this.mediaQuery.addListener === 'function') {
+            this.mediaQuery.addListener(handleChange);
+        }
+    }
+
+    handleSystemPreferenceChange() {
+        if (this.currentTheme === 'system') {
+            this.applyTheme('system', false);
+        }
+    }
+
+    applyTheme(theme, persist = true) {
+        const normalized = this.normalizeTheme(theme);
+        const root = document.documentElement;
+        this.currentTheme = normalized;
+
+        if (persist) {
+            try {
+                localStorage.setItem(this.storageKey, normalized);
+            } catch (error) {
+                console.warn('Unable to persist theme preference:', error);
+            }
+        }
+
+        if (normalized === 'light' || normalized === 'dark') {
+            root.setAttribute('data-theme', normalized);
+        } else {
+            root.removeAttribute('data-theme');
+        }
+
+        root.setAttribute('data-theme-preference', normalized);
+
+        this.updateToggleUI(normalized);
+        this.updateMetaThemeColor();
+
+        const resolved = this.getResolvedTheme(normalized);
+        document.dispatchEvent(new CustomEvent('themechange', {
+            detail: {
+                preference: normalized,
+                theme: resolved
+            }
+        }));
+    }
+
+    updateToggleUI(theme) {
+        const label = this.labelMap[theme] || this.labelMap.system;
+        const icon = this.iconMap[theme] || this.iconMap.system;
+
+        if (this.themeLabel) {
+            this.themeLabel.textContent = label;
+        }
+
+        if (this.themeIcon) {
+            this.themeIcon.className = `fas ${icon} me-2`;
+        }
+
+        if (this.themeToggleButton) {
+            this.themeToggleButton.setAttribute('aria-label', `Theme: ${label}`);
+        }
+
+        this.themeOptions.forEach((option) => {
+            const isActive = option.dataset.themeOption === theme;
+            option.classList.toggle('active', isActive);
+            option.setAttribute('aria-checked', String(isActive));
+        });
+    }
+
+    updateMetaThemeColor() {
+        if (!this.metaThemeColor) return;
+
+        const computedColor = getComputedStyle(document.documentElement)
+            .getPropertyValue('--theme-color')
+            .trim();
+
+        if (computedColor) {
+            this.metaThemeColor.setAttribute('content', computedColor);
+        }
+    }
+
+    getResolvedTheme(theme = this.currentTheme) {
+        if (theme === 'system') {
+            return this.mediaQuery.matches ? 'dark' : 'light';
+        }
+        return theme;
+    }
+}
+
 class UnitForge {
     constructor() {
+        this.themeManager = new ThemeManager();
         this.baseUrl = window.location.origin;
         this.apiUrl = `${this.baseUrl}/api`;
         this.init();
@@ -377,3 +521,5 @@ const unitforge = new UnitForge();
 // Export for use in other modules
 window.UnitForge = UnitForge;
 window.unitforge = unitforge;
+window.ThemeManager = ThemeManager;
+window.themeManager = unitforge.themeManager;