feat(layout): add theme script to prevent light mode flash during hydration

2026-08-26 18:33:30 +07:00
parent cacebfd94e
commit 192685e1ce
1 changed files with 13 additions and 1 deletions
@@ -44,9 +44,21 @@ export default function RootLayout({
  return (
    <html
      lang="en"
-      className={`${inter.variable} ${jetbrainsMono.variable} ${bricolage.variable} h-full antialiased`}
+      className={`${inter.variable} ${jetbrainsMono.variable} ${bricolage.variable} h-full antialiased dark`}
      suppressHydrationWarning
    >
+      <head>
+        {/*
+          Blocking script: apply saved theme (or default "dark") before first
+          paint so the page never flashes light mode during client-side
+          navigation or hydration. next-themes will take over after mount.
+        */}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `(function(){try{var t=localStorage.getItem('theme');document.documentElement.className+=' '+(t||'dark')}catch(e){}})()`,
+          }}
+        />
+      </head>
      <body className="min-h-full flex flex-col">
        <SwrProvider>
          <ThemeProvider