'use client'; /** * ThemeInitializer — applies theme CSS variables directly on . * * Sets both the light/dark mode colors and the accent color on mount * and whenever they change. */ import { useEffect } from 'react'; import { useThemeStore } from '@/lib/stores/theme-store'; const lightColors = { '--color-divisi-bg': '#f5f5f5', '--color-divisi-card': '#ffffff', '--color-divisi-border': 'rgba(0, 0, 0, 0.1)', '--color-divisi-text-primary': '#1a1a1a', '--color-divisi-text-secondary': '#6b7280', }; const darkColors = { '--color-divisi-bg': '#0a0a0a', '--color-divisi-card': '#141414', '--color-divisi-border': 'rgba(255, 255, 255, 0.08)', '--color-divisi-text-primary': '#ffffff', '--color-divisi-text-secondary': '#a0a0a0', }; export default function ThemeInitializer() { const mode = useThemeStore((s) => s.mode); const accent = useThemeStore((s) => s.accent); useEffect(() => { const root = document.documentElement; root.setAttribute('data-theme', mode); const colors = mode === 'light' ? lightColors : darkColors; for (const [key, value] of Object.entries(colors)) { root.style.setProperty(key, value); } // Apply accent color based on mode const isLight = mode === 'light'; root.style.setProperty('--color-divisi-accent', isLight ? accent.light : accent.value); root.style.setProperty('--color-divisi-accent-hover', isLight ? accent.lightHover : accent.hover); }, [mode, accent]); return null; }