rock/riotpiao.com
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: persist dark mode theme across page reloads
Build & Push Portfolio Image / build-push (push) Successful in 2m36s
Details

Browse Source 
- 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:
Story Crater Bot
2026-08-31 20:17:44 -07:00
parent e8dbc2100c
commit cd8e21200d
2 changed files with 33 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+15
View File
@@ -16,6 +16,21 @@ export default function RootLayout({
return ( return (
<html lang="en" suppressHydrationWarning> <html lang="en" suppressHydrationWarning>
<body className="bg-white dark:bg-gray-950 text-gray-900 dark:text-white"> <body className="bg-white dark:bg-gray-950 text-gray-900 dark:text-white">
<script
dangerouslySetInnerHTML={{
__html: `
(function() {
try {
var stored = localStorage.getItem('theme');
var prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (stored === 'dark' || (!stored && prefersDark)) {
document.documentElement.classList.add('dark');
}
} catch (e) {}
})();
`,
}}
/>
<LanguageProvider> <LanguageProvider>
<TerminalProvider> <TerminalProvider>
<Header /> <Header />
components/Header.tsx
+18 -3
View File
@@ -28,13 +28,28 @@ export default function Header() {
} }
useEffect(() => { 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) setDark(isDark)
}, []) }, [])
const toggleDark = () => { const toggleDark = () => {
document.documentElement.classList.toggle('dark') const newDark = !dark
setDark(!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 ( return (