import { useEffect } from 'react';
import { useTheme } from '@/stores/selectors';
export function ThemeProvider({ children }: { children: React.ReactNode }) {
const theme = useTheme();
useEffect(() => {
const root = document.documentElement;
if (theme === 'system') {
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
root.classList.toggle('dark', e.matches);
};
handleChange(mediaQuery);
mediaQuery.addEventListener('change', handleChange);
return () => mediaQuery.removeEventListener('change', handleChange);
} else {
root.classList.toggle('dark', theme === 'dark');
}
}, [theme]);
return <>{children}</>;
}
