You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Users can see a brief flash of the wrong theme during the initial page load, especially when their saved theme or system preference is dark. The page defaults to light CSS variables from :root before the dark class is fully applied, so the first paint can happen with the wrong colors.
Context
app/layout.tsx defines a custom themeInitScript that reads devimpact-theme, checks prefers-color-scheme, and toggles the dark class.
The script is rendered inside <body> via next/script with strategy="beforeInteractive", while the initial HTML element is rendered without a server-known theme class.
components/theme-provider.tsx also uses next-themes with attribute="class", defaultTheme="system", and the same devimpact-theme storage key, so the custom script and next-themes need to stay aligned.
app/globals.css defines light values in :root and dark values in .dark, which makes the timing of the dark class visible on first paint.
Tasks
Reproduce the flash with saved dark theme and with system dark preference in a fresh/private browser session.
Move theme initialization as early as possible before first paint, or rely on a single next-themes initialization path that applies the class before render.
Ensure the server-rendered HTML and client hydration do not fight over the dark class or color-scheme.
Verify there is no flash on hard reload, direct route loads, and mobile viewport.
Add a short regression note or visual check for theme initialization behavior.
Tip
🚀 Want to contribute?
Comment assign me to be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨
Users can see a brief flash of the wrong theme during the initial page load, especially when their saved theme or system preference is dark. The page defaults to light CSS variables from
:rootbefore the dark class is fully applied, so the first paint can happen with the wrong colors.Context
app/layout.tsxdefines a customthemeInitScriptthat readsdevimpact-theme, checksprefers-color-scheme, and toggles thedarkclass.<body>vianext/scriptwithstrategy="beforeInteractive", while the initial HTML element is rendered without a server-known theme class.components/theme-provider.tsxalso usesnext-themeswithattribute="class",defaultTheme="system", and the samedevimpact-themestorage key, so the custom script andnext-themesneed to stay aligned.app/globals.cssdefines light values in:rootand dark values in.dark, which makes the timing of thedarkclass visible on first paint.Tasks
next-themesinitialization path that applies the class before render.darkclass orcolor-scheme.Tip
🚀 Want to contribute?
Comment
assign meto be automatically assigned to this issue via our GitHub Actions bot. Happy coding! ✨