/* Theme Initialization Script * Handles theme detection and application based on localStorage preference or browser settings * Must be loaded in before page content to prevent flash of unstyled content */ (function() { 'use strict'; // Get saved theme preference from localStorage const savedTheme = localStorage.getItem('theme-preference'); // Apply theme immediately to prevent FOUC (Flash of Unstyled Content) function applyTheme(theme) { const body = document.body || document.documentElement; if (theme === 'dark') { body.classList.remove('light-mode'); body.classList.add('dark-mode'); } else if (theme === 'light') { body.classList.remove('dark-mode'); body.classList.add('light-mode'); } else { // 'auto' mode - remove manual override classes body.classList.remove('dark-mode', 'light-mode'); } } // Apply theme based on preference if (savedTheme === 'dark' || savedTheme === 'light' || savedTheme === 'auto') { applyTheme(savedTheme); } // If no preference saved, default to 'auto' (browser preference) // Make theme switching function available globally window.setTheme = function(theme) { if (theme === 'light' || theme === 'dark' || theme === 'auto') { localStorage.setItem('theme-preference', theme); applyTheme(theme); // Trigger custom event for components that need to update (e.g., charts) window.dispatchEvent(new CustomEvent('themechange', { detail: { theme } })); } }; // Get current effective theme (resolves 'auto' to actual theme) window.getEffectiveTheme = function() { const savedTheme = localStorage.getItem('theme-preference'); if (savedTheme === 'dark') return 'dark'; if (savedTheme === 'light') return 'light'; // 'auto' or no preference - check system preference if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark'; } return 'light'; }; // Get saved theme preference (returns 'light', 'dark', 'auto', or null) window.getThemePreference = function() { return localStorage.getItem('theme-preference') || 'auto'; }; // Listen for system theme changes when in auto mode if (window.matchMedia) { const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); mediaQuery.addEventListener('change', function(e) { const savedTheme = localStorage.getItem('theme-preference'); // Only react to system changes if in auto mode if (!savedTheme || savedTheme === 'auto') { // Trigger theme change event for components that need to update window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: 'auto' } })); } }); } })();