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(themes[0]);
useEffect(() => {
const user = localStorage.getItem('theme')
if (!user) return;
setTheme(user);
}, [])
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;