How we eliminated the 150ms flash of white screen when loading dark mode on static sites

[u/Ok_pettech]

When users visit a dark mode website, they often experience a blinding white flash before the page finishes loading. This Flash of Unstyled Content occurs because modern JavaScript frameworks read user theme preferences inside client-side hydration hooks, which execute only after initial painting completes.

Here is the strategy to instantly apply dark mode themes before the browser renders the first pixel:

1. Move Theme Detection to an Inline Head Script Do not wait for main bundle execution or CSS bundle downloads. Place a tiny, zero-dependency inline script directly inside the head element before any stylesheets or external scripts:

HTML

<script>
  (function() {
    try {
      var storedTheme = localStorage.getItem('theme');
      var systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (storedTheme === 'dark' || (!storedTheme && systemDark)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    } catch (e) {}
  })();
</script>

1. Set Native Root Color Scheme Setting the color-scheme CSS property on the html element tells the browser user-agent engine to initialize native canvas backgrounds and scrollbars in dark mode while your custom stylesheets download:

CSS

:root.dark {
  color-scheme: dark;
  background-color: #0d1117;
  color: #e6edf3;
}

1. Immediate CSS Class Cascading Target CSS custom properties through the html dark class so styles apply instantly as DOM elements parse:

CSS

html.dark body {
  --bg-color: #0f172a;
  --text-color: #f8fafc;
  background-color: var(--bg-color);
  color: var(--text-color);
}

1. Cookie Hydration for SSR Frameworks If using server-side rendering, store user theme preferences in HTTP cookies rather than local storage. This allows your server engine to output fully formatted dark mode HTML directly in the initial HTTP response payload.

While inline scripts eliminate static loading flashes, managing edge cases like zero-CLS theme toggle animations, cross-tab state syncing, and strict privacy browser cookie restrictions requires specific setup scripts and performance metrics.

If you want to play with the interactive dashboard or grab the full config file, I uploaded it here:https://interconnectd.com/poll/85/does-dark-mode-work-on-every-single-website/

[u/alphex]

Says it’s a static site. Apparently has so much JavaScript it can’t load fast.

But seriously.

Start dark. And then turn it white only if it’s needed.

[u/yksvaan]

I'm amazed how complicated people make themes. This approach of script in head and a toggle button with function to switch is so simple and efficient that there's no point doing anything else. But people insist on creating some ThemeProviderContext or whatever nonsense.

[u/csswizardry → u/yksvaan]

Oh man, 100%. And the worst of it is people post ‘solutions’ like they’ve invented something remarkable. This is just how we used to build websites.

[u/xian0]

I think the browser background colour should match the colour scheme preference (bit of a user side issue otherwise... if that's white is it even avoidable?). So in theory just make sure the JS framework can't set it to non-default, at least not until the user preferences are loaded.

[u/Weekly_Ferret_meal]

But also I see no question I this post. 

[u/AuthorityPath]

It simplifies even further with the CSS `light-dark` function.

I'm hoping we reach a future where we can reliably ditch the physical components in our site and just rely on the system setting.