added support for dark mode

2026-01-24 23:04:44 +01:00
parent d9948d271f
commit b7d80e7f26
17 changed files with 1002 additions and 265 deletions
@@ -0,0 +1,76 @@
+/* Theme Initialization Script
+ * Handles theme detection and application based on localStorage preference or browser settings
+ * Must be loaded in <head> 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' } }));
+            }
+        });
+    }
+})();