163952e
import { useEffect, useState } from 'preact/hooks'
export function useTheme() {
const [theme, setTheme] = useState(() => {
try {
return localStorage.getItem('auth-theme') || 'system'
} catch {
return 'system'
}
})
const [systemDark, setSystemDark] = useState(() => matchMedia('(prefers-color-scheme: dark)').matches)
const dark = theme === 'dark' || (theme === 'system' && systemDark)
useEffect(() => {
const media = matchMedia('(prefers-color-scheme: dark)')
const update = () => setSystemDark(media.matches)
media.addEventListener('change', update)
return () => media.removeEventListener('change', update)
}, [])
useEffect(() => {
document.documentElement.dataset.theme = dark ? 'dark' : 'light'
}, [dark])
function toggle() {
const next = dark ? 'light' : 'dark'
setTheme(next)
try {
localStorage.setItem('auth-theme', next)
} catch {}
}
return { theme, dark, toggle }
}
export type ThemeModel = ReturnType<typeof useTheme>