/* Theme manager — light/dark with localStorage + prefers-color-scheme.
Applies as data-theme on ; colors_and_type.css does the flip. */
const ThemeCtx = React.createContext({ theme: 'light', setTheme: () => {}, toggle: () => {} });
function getInitialTheme() {
try {
const stored = localStorage.getItem('vizo-theme');
if (stored === 'light' || stored === 'dark') return stored;
} catch (e) {}
if (typeof window !== 'undefined' && window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
}
function ThemeProvider({ children }) {
const [theme, setThemeState] = React.useState(getInitialTheme);
React.useEffect(() => {
document.documentElement.setAttribute('data-theme', theme);
try { localStorage.setItem('vizo-theme', theme); } catch (e) {}
}, [theme]);
// Respect OS changes if user hasn't explicitly picked
React.useEffect(() => {
if (!window.matchMedia) return;
const mq = window.matchMedia('(prefers-color-scheme: dark)');
const onChange = (e) => {
let stored = null;
try { stored = localStorage.getItem('vizo-theme'); } catch (err) {}
if (stored !== 'light' && stored !== 'dark') {
setThemeState(e.matches ? 'dark' : 'light');
}
};
mq.addEventListener ? mq.addEventListener('change', onChange) : mq.addListener(onChange);
return () => {
mq.removeEventListener ? mq.removeEventListener('change', onChange) : mq.removeListener(onChange);
};
}, []);
const setTheme = React.useCallback((t) => setThemeState(t), []);
const toggle = React.useCallback(() => setThemeState(t => t === 'dark' ? 'light' : 'dark'), []);
return (
{children}
);
}
function useTheme() { return React.useContext(ThemeCtx); }
/* Icon-only toggle — sun ↔ moon, smooth crossfade.
Matches nav text colour + weight; subtle bone-tint on hover. */
function ThemeToggle({ size = 22 }) {
const { theme, toggle } = useTheme();
const [hover, setHover] = React.useState(false);
const isDark = theme === 'dark';
return (
);
}
function iconWrap(opacity, rotate) {
return {
position: 'absolute',
display: 'inline-flex',
alignItems: 'center', justifyContent: 'center',
opacity, transform: `rotate(${rotate}deg)`,
transition: 'opacity 250ms var(--ease-standard), transform 300ms var(--ease-standard)',
};
}
function Sun({ size = 22 }) {
return (
);
}
function Moon({ size = 22 }) {
return (
);
}
Object.assign(window, { ThemeProvider, useTheme, ThemeToggle, ThemeCtx });