Skip to content

Commit 994b691

Browse files
committed
fix: prevent theme flash on initial load
1 parent 3536bcb commit 994b691

2 files changed

Lines changed: 7 additions & 4 deletions

File tree

app/layout.tsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import "./globals.css";
22
import type { ReactNode } from "react";
33
import type { Metadata } from "next";
44
import { cookies, headers } from "next/headers";
5-
import Script from "next/script";
65
import {
76
DEFAULT_LOCALE,
87
LOCALE_COOKIE,
@@ -112,10 +111,13 @@ export default async function RootLayout({ children }: { children: ReactNode })
112111

113112
return (
114113
<html lang={initialLocale} dir={dir} suppressHydrationWarning>
114+
<head>
115+
<script
116+
id="theme-init"
117+
dangerouslySetInnerHTML={{ __html: themeInitScript }}
118+
/>
119+
</head>
115120
<body>
116-
<Script id="theme-init" strategy="beforeInteractive">
117-
{themeInitScript}
118-
</Script>
119121
<Providers initialLocale={initialLocale}>{children}</Providers>
120122
</body>
121123
</html>

components/theme-provider.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
99
attribute="class"
1010
defaultTheme="system"
1111
enableSystem
12+
enableColorScheme
1213
storageKey="devimpact-theme"
1314
>
1415
{children}

0 commit comments

Comments
 (0)