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
2026-08-31 20:17:44 -07:00
parent e8dbc2100c
commit cd8e21200d
2 changed files with 33 additions and 3 deletions
@@ -16,6 +16,21 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <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>
          <TerminalProvider>
            <Header />
@@ -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 (