From cd8e21200db941670b387a89de45b153b475606a Mon Sep 17 00:00:00 2001
From: Story Crater Bot <19826264+Riotpiaole@users.noreply.github.com>
Date: Mon, 31 Aug 2026 20:17:44 -0700
Subject: [PATCH] fix: persist dark mode theme across page reloads
- Save theme preference to localStorage on toggle
- Load from localStorage or system preference on mount
- Add blocking script to prevent flash of wrong theme
---
app/layout.tsx | 15 +++++++++++++++
components/Header.tsx | 21 ++++++++++++++++++---
2 files changed, 33 insertions(+), 3 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index 625de0f..1061c61 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -16,6 +16,21 @@ export default function RootLayout({
return (
+
diff --git a/components/Header.tsx b/components/Header.tsx
index e6310e9..bc19339 100644
--- a/components/Header.tsx
+++ b/components/Header.tsx
@@ -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 (