feat: implement 4-theme system with Zustand persistence
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
26
apps/web/components/providers/theme-provider.tsx
Normal file
26
apps/web/components/providers/theme-provider.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useThemeStore } from '@/stores/theme-store';
|
||||
import { themes } from '@/themes';
|
||||
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const { theme } = useThemeStore();
|
||||
|
||||
useEffect(() => {
|
||||
const selectedTheme = themes[theme];
|
||||
const root = document.documentElement;
|
||||
|
||||
Object.entries(selectedTheme.cssVars).forEach(([key, value]) => {
|
||||
root.style.setProperty(key, value);
|
||||
});
|
||||
|
||||
if (theme === 'dark') {
|
||||
root.classList.add('dark');
|
||||
} else {
|
||||
root.classList.remove('dark');
|
||||
}
|
||||
}, [theme]);
|
||||
|
||||
return <>{children}</>;
|
||||
}
|
||||
Reference in New Issue
Block a user