'use client'; /** * Zustand store for theme mode (light/dark) and accent color. * * Persists preferences to localStorage and applies them via * data-theme attribute and CSS custom properties on . */ import { create } from 'zustand'; export type ThemeMode = 'dark' | 'light'; export interface AccentColor { name: string; value: string; hover: string; /** Darker variant for light mode readability */ light: string; lightHover: string; } export const ACCENT_PRESETS: AccentColor[] = [ { name: 'Lime', value: '#c8e600', hover: '#d4f000', light: '#6d8a00', lightHover: '#7d9e00' }, { name: 'Blue', value: '#3b82f6', hover: '#60a5fa', light: '#2563eb', lightHover: '#3b82f6' }, { name: 'Purple', value: '#8b5cf6', hover: '#a78bfa', light: '#7c3aed', lightHover: '#8b5cf6' }, { name: 'Pink', value: '#ec4899', hover: '#f472b6', light: '#db2777', lightHover: '#ec4899' }, { name: 'Cyan', value: '#06b6d4', hover: '#22d3ee', light: '#0891b2', lightHover: '#06b6d4' }, { name: 'Orange', value: '#f59e0b', hover: '#fbbf24', light: '#d97706', lightHover: '#f59e0b' }, { name: 'Emerald', value: '#10b981', hover: '#34d399', light: '#059669', lightHover: '#10b981' }, { name: 'Red', value: '#ef4444', hover: '#f87171', light: '#dc2626', lightHover: '#ef4444' }, ]; export interface ThemeState { mode: ThemeMode; accent: AccentColor; toggle: () => void; setMode: (mode: ThemeMode) => void; setAccent: (accent: AccentColor) => void; } function applyTheme(mode: ThemeMode) { if (typeof document !== 'undefined') { document.documentElement.setAttribute('data-theme', mode); try { localStorage.setItem('divisi-theme', mode); } catch { /* */ } } } function applyAccent(accent: AccentColor, mode: ThemeMode) { if (typeof document !== 'undefined') { const root = document.documentElement; 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); try { localStorage.setItem('divisi-accent', JSON.stringify(accent)); } catch { /* */ } } } function getInitialMode(): ThemeMode { if (typeof window !== 'undefined') { try { const stored = localStorage.getItem('divisi-theme'); if (stored === 'light' || stored === 'dark') return stored; } catch { /* */ } } return 'dark'; } function getInitialAccent(): AccentColor { if (typeof window !== 'undefined') { try { const stored = localStorage.getItem('divisi-accent'); if (stored) return JSON.parse(stored); } catch { /* */ } } return ACCENT_PRESETS[0]; // Lime default } export const useThemeStore = create()((set, get) => ({ mode: getInitialMode(), accent: getInitialAccent(), toggle: () => set((state) => { const next = state.mode === 'dark' ? 'light' : 'dark'; applyTheme(next); applyAccent(state.accent, next); return { mode: next }; }), setMode: (mode) => { applyTheme(mode); applyAccent(get().accent, mode); set({ mode }); }, setAccent: (accent) => { applyAccent(accent, get().mode); set({ accent }); }, }));