// mariusson — theme (light / dark) // // The actual palette flip happens via CSS variables in tokens.css — // dark/light overrides keyed off ``. // This module just exposes a hook + setter so React components can // flip the attribute and we persist the choice. (() => { const KEY = 'mariusson:theme'; function readTheme() { try { return localStorage.getItem(KEY) || 'light'; } catch { return 'light'; } } function writeTheme(t) { try { localStorage.setItem(KEY, t); } catch {} document.documentElement.setAttribute('data-theme', t); window.dispatchEvent(new CustomEvent('an-theme-changed', { detail: t })); } function useTheme() { const [theme, setTheme] = React.useState(() => readTheme()); React.useEffect(() => { const onChange = (e) => setTheme(e.detail || readTheme()); const onStorage = (e) => { if (e.key === KEY) setTheme(readTheme()); }; window.addEventListener('an-theme-changed', onChange); window.addEventListener('storage', onStorage); return () => { window.removeEventListener('an-theme-changed', onChange); window.removeEventListener('storage', onStorage); }; }, []); return { theme, setTheme: (t) => writeTheme(t), toggle: () => writeTheme(theme === 'dark' ? 'light' : 'dark'), }; } // Compact pill button — sits in the chrome bar. Sun/moon glyph swaps. function ThemeToggle({ style = {} }) { const { theme, toggle } = useTheme(); const isDark = theme === 'dark'; return ( ); } window.useTheme = useTheme; window.ThemeToggle = ThemeToggle; })();