File size: 1,861 Bytes
bbb1195 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import { useEffect } from 'react';
import { useConfigStore } from '../../stores/useConfigStore';
export default function ThemeManager() {
const { config, loadConfig } = useConfigStore();
// Load config on mount
useEffect(() => {
loadConfig();
}, [loadConfig]);
// Apply theme when config changes
useEffect(() => {
if (!config) return;
const applyTheme = (theme: string) => {
const root = document.documentElement;
const isDark = theme === 'dark';
// Set DaisyUI theme
root.setAttribute('data-theme', theme);
// Set inline style for immediate visual feedback
root.style.backgroundColor = isDark ? '#1d232a' : '#FAFBFC';
// Set Tailwind dark mode class
if (isDark) {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
};
const theme = config.theme || 'system';
// Sync to localStorage for early boot check
localStorage.setItem('app-theme-preference', theme);
if (theme === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleSystemChange = (e: MediaQueryListEvent | MediaQueryList) => {
const systemTheme = e.matches ? 'dark' : 'light';
applyTheme(systemTheme);
};
// Initial alignment
handleSystemChange(mediaQuery);
// Listen for changes
mediaQuery.addEventListener('change', handleSystemChange);
return () => mediaQuery.removeEventListener('change', handleSystemChange);
} else {
applyTheme(theme);
}
}, [config?.theme]);
return null; // This component handles side effects only
}
|