54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useEffect } from 'react';
|
||
|
|
import { useThemeStore } from '@/lib/stores/use-theme-store';
|
||
|
|
import { hexToHSL } from '@/lib/theme';
|
||
|
|
|
||
|
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||
|
|
const { mode, accent, density, reducedMotion } = useThemeStore();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const root = document.documentElement;
|
||
|
|
|
||
|
|
// Apply dark/light mode
|
||
|
|
if (mode === 'system') {
|
||
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||
|
|
const handler = (e: MediaQueryListEvent | MediaQueryList) => {
|
||
|
|
root.classList.toggle('dark', e.matches);
|
||
|
|
};
|
||
|
|
handler(mediaQuery);
|
||
|
|
mediaQuery.addEventListener(
|
||
|
|
'change',
|
||
|
|
handler as (e: MediaQueryListEvent) => void
|
||
|
|
);
|
||
|
|
return () =>
|
||
|
|
mediaQuery.removeEventListener(
|
||
|
|
'change',
|
||
|
|
handler as (e: MediaQueryListEvent) => void
|
||
|
|
);
|
||
|
|
} else {
|
||
|
|
root.classList.toggle('dark', mode === 'dark');
|
||
|
|
}
|
||
|
|
}, [mode]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const root = document.documentElement;
|
||
|
|
|
||
|
|
// Apply accent color as CSS variable (convert hex to HSL for consistency)
|
||
|
|
const hsl = hexToHSL(accent);
|
||
|
|
root.style.setProperty('--primary', `${hsl.h} ${hsl.s}% ${hsl.l}%`);
|
||
|
|
|
||
|
|
// Apply density
|
||
|
|
root.setAttribute('data-density', density);
|
||
|
|
|
||
|
|
// Apply reduced motion
|
||
|
|
if (reducedMotion) {
|
||
|
|
root.setAttribute('data-reduced-motion', 'true');
|
||
|
|
} else {
|
||
|
|
root.removeAttribute('data-reduced-motion');
|
||
|
|
}
|
||
|
|
}, [accent, density, reducedMotion]);
|
||
|
|
|
||
|
|
return <>{children}</>;
|
||
|
|
}
|