'use client'; import { useEffect, useState } from 'react'; import { Moon, Sun, Monitor } from 'lucide-react'; type Theme = 'light' | 'dark' | 'system'; const KEY = 'ci-theme'; /** * Light / dark / system toggle (SPEC §86). The choice is stored in localStorage and applied to * before first paint by the inline script in layout.tsx, so there is no flash. * "system" removes the attribute and lets the prefers-color-scheme media query decide. */ export function ThemeToggle() { const [theme, setTheme] = useState('system'); useEffect(() => { const stored = (typeof window !== 'undefined' && window.localStorage.getItem(KEY)) as Theme | null; if (stored === 'light' || stored === 'dark') setTheme(stored); }, []); const apply = (t: Theme) => { setTheme(t); const root = document.documentElement; if (t === 'system') { window.localStorage.removeItem(KEY); root.removeAttribute('data-theme'); } else { window.localStorage.setItem(KEY, t); root.setAttribute('data-theme', t); } }; const next: Theme = theme === 'system' ? 'dark' : theme === 'dark' ? 'light' : 'system'; const label = theme === 'system' ? 'Theme: system' : theme === 'dark' ? 'Theme: dark' : 'Theme: light'; const Icon = theme === 'system' ? Monitor : theme === 'dark' ? Moon : Sun; return ( ); }