fix: persist dark mode theme across page reloads
Build & Push Portfolio Image / build-push (push) Successful in 2m36s
Build & Push Portfolio Image / build-push (push) Successful in 2m36s
- Save theme preference to localStorage on toggle - Load from localStorage or system preference on mount - Add blocking script to prevent flash of wrong theme
This commit is contained in:
+18
-3
@@ -28,13 +28,28 @@ export default function Header() {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
const isDark = document.documentElement.classList.contains('dark')
|
||||
const stored = localStorage.getItem('theme')
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
const isDark = stored === 'dark' || (!stored && prefersDark)
|
||||
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
setDark(isDark)
|
||||
}, [])
|
||||
|
||||
const toggleDark = () => {
|
||||
document.documentElement.classList.toggle('dark')
|
||||
setDark(!dark)
|
||||
const newDark = !dark
|
||||
if (newDark) {
|
||||
document.documentElement.classList.add('dark')
|
||||
localStorage.setItem('theme', 'dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
localStorage.setItem('theme', 'light')
|
||||
}
|
||||
setDark(newDark)
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user