优化亮暗色切换逻辑

2026-11-03 11:06:32 +09:00 · 2026-09-16 12:53:54 +08:00
parent 706463d12f
commit d4bd36f5f8
4 changed files with 73 additions and 354 deletions
@@ -23,7 +23,25 @@ export default function RootLayout({
  children,
 }: Readonly<{ children: React.ReactNode }>) {
  return (
-    <html lang="zh-CN">
+    <html lang="zh-CN" suppressHydrationWarning>
+      <head>
+        {/* Run during HTML parsing, before the body can paint. */}
+        <script
+          id="theme-preference"
+          dangerouslySetInnerHTML={{ __html: `(() => {
+            const isTheme = (value) => value === 'light' || value === 'system' || value === 'dark';
+            let preference = 'system';
+            try {
+              const cookieTheme = document.cookie.split(';').map((entry) => entry.trim()).find((entry) => entry.startsWith('kr-theme='))?.slice('kr-theme='.length);
+              const savedTheme = isTheme(cookieTheme) ? cookieTheme : localStorage.getItem('kr-theme');
+              if (isTheme(savedTheme)) preference = savedTheme;
+            } catch {}
+            const theme = preference === 'system' ? (matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : preference;
+            document.documentElement.dataset.theme = theme;
+            document.documentElement.style.colorScheme = theme;
+          })();` }}
+        />
+      </head>
      <body>
        <SiteHeader />{children}<SiteFooter />
      </body>