feat: add persistent light/dark mode toggle

- Add CSS custom property token system to globals.css (dark + light variants) - Add anti-FOUC inline script in layout.tsx head to apply stored theme before hydration - Create useTheme hook (src/hooks/useTheme.ts) backed by usePersistentState - Add Sun/Moon toggle button to LeftToolbar above Settings - Wire useTheme into ThreePanelLayout and pass theme/onThemeToggle to LeftToolbar - Migrate hardcoded hex values to CSS vars in LeftToolbar and ThreePanelLayout Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 19:32:06 +11:00
parent 4802187f5e
commit bf175ad125
5 changed files with 144 additions and 13 deletions
@@ -13,7 +13,31 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  var rawTheme = localStorage.getItem('ui.theme');
+                  var theme = 'dark';
+                  if (rawTheme !== null) {
+                    try {
+                      theme = JSON.parse(rawTheme) === 'light' ? 'light' : 'dark';
+                    } catch (parseError) {
+                      theme = rawTheme === 'light' ? 'light' : 'dark';
+                    }
+                  }
+                  document.documentElement.setAttribute('data-theme', theme);
+                } catch (error) {
+                  document.documentElement.setAttribute('data-theme', 'dark');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
      <body>
        <DimensionIconsProvider>
          <ExternalNavigationManager />