Fix color flash on page load when setting dark/light mode

Gazler · Gazler · commit c9c1ab4d2767 · 2025-02-24T17:03:17.000Z
Previously, when loading the landing page, the page colors would flash briefly. For light mode the background flashes black before the white background loads. For dark mode, the header would flash white, and the text black, before the correct colors render. This was happening because the script was being executed after the page had finished loading, likely due to how the page is packaged into chunks. To fix this, the dark mode script is now set inline, so will be part of the generated HTML. This fixes tailwindlabs#2105
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -159,8 +159,7 @@ export default async function RootLayout({
         <meta name="application-name" content="Tailwind CSS" />
         <meta name="msapplication-TileColor" content="#38bdf8" />
         <meta name="msapplication-config" content={v("/favicons/browserconfig.xml")} />
-
-        <Script src={`data:text/javascript;base64,${btoa(darkModeScript)}`} />
+        <script type="text/javascript" dangerouslySetInnerHTML={{__html: darkModeScript}}></script>
       </head>
       <body>
         <Fathom />
