import type { FunctionalComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useEffect } from 'preact/hooks';
const themes = ['system', 'light', 'dark'];
const icons = [
,
,
,
];
const ThemeToggle: FunctionalComponent = () => {
const [theme, setTheme] = useState(() => {
if (typeof localStorage === 'undefined') {
return themes[0];
}
return localStorage.getItem('theme') || themes[0];
});
useEffect(() => {
const root = document.documentElement;
if (theme === 'system') {
localStorage.removeItem('theme');
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
root.classList.add('theme-dark');
} else {
root.classList.remove('theme-dark');
}
} else {
localStorage.setItem('theme', theme);
if (theme === 'light') {
root.classList.remove('theme-dark');
} else {
root.classList.add('theme-dark');
}
}
}, [theme]);
return (
{themes.map((t, i) => {
const icon = icons[i];
const checked = t === theme;
return (
);
})}
);
};
export default ThemeToggle;