Why Dark Mode Causes White Flashes When Loading New Pages

You switch to a new tab and — bam — blinding white flash before dark mode kicks in.
If you use dark mode religiously while coding or reading late at night, this is
probably the most annoying thing about your browser setup right now.

The good news: there's a clear reason this happens, and it's fixable.

Why the flash happens

Browsers render pages in two passes. First, the browser paints the HTML with its
default white background before any CSS or JavaScript has loaded. Then, once
styles are applied, it repaints. If a dark mode extension injects CSS via a
content script, that injection happens during or after the second pass — which
means you always see the white flash first.

This is the core problem. Browser extensions run in an isolated context and
can't inject styles before the browser's first paint. The page background color
is baked into the rendering pipeline before any extension has a chance to
override it.

Some sites make this worse than others. Pages that load dozens of external
resources (fonts, images, analytics) before rendering take longer to reach the
point where a content script can inject dark styles. Heavy SPAs using client-side
rendering are especially bad for this — React and Vue apps paint a blank
white shell before hydration completes.

The manual workarounds (and why they don't fully work)

A few things people try:

1. Setting Chrome's default background color to dark via chrome://flags. This
helps slightly but doesn't fix every case and can break certain site layouts.

2. Using Chrome's built-in Force Dark Mode flag. This applies dark mode at
the rendering level rather than via CSS injection, which eliminates the flash
for most pages. The downside: it inverts colors aggressively and breaks images,
video thumbnails, and carefully designed UI elements.

3. Pinning frequently visited tabs. Tabs that are already loaded don't flash
because dark styles are already applied. Useful for sites you visit constantly,
but not a real fix.

None of these fully solve the problem for general browsing.

How Modern Dark Mode addresses this

Modern Dark Mode uses a preload injection approach that other extensions don't.
Rather than waiting for the page to load before applying dark styles, it
registers a declarativeNetRequest rule that injects a small dark-background
style block during the early request phase — before HTML is parsed by the
browser.

This means the browser's first paint already has a dark background, so there's
no visible white frame before styles apply. For most pages, the flash is
eliminated entirely.

There's also a Flash Prevention toggle in the extension's settings panel.
Make sure this is on — it's off by default to avoid any possible layout
conflicts on unusual sites.

How to configure it

1. Install Modern Dark Mode from the Chrome Web Store
2. Click the extension icon and open Settings
3. Enable Flash Prevention under the Rendering section
4. Set your preferred contrast level — Balanced works best for most screens
5. If a specific site still flashes, add it to the Priority Sites list
and the extension will pre-warm its dark injection for that origin

A few edge cases

Local HTML files (file:// URLs) won't benefit from preload injection because
there's no network request for the extension to intercept. Same with Chrome's
internal pages like the New Tab page and Settings — those are sandboxed from
extension content scripts entirely.

For chrome://newtab, the cleanest fix is to use a dark New Tab extension
or set your Chrome theme to a dark variant. Modern Dark Mode handles this by
offering its own minimal dark New Tab override you can enable in settings.

The flash problem is one of those things that seems minor until you're staring
at a screen at 2am and every tab switch feels like someone flicking on the
lights. With flash prevention enabled, it mostly disappears — and that's
enough to make late-night browsing noticeably more comfortable.

Testing whether flash prevention is working

Once you've enabled Flash Prevention, here's a quick test. Open a new
incognito window (where extensions still run if you've enabled them in
incognito mode) and navigate to a plain HTML page with a white background.
If you see even a brief white frame before the dark background appears,
the preload injection hasn't taken effect. Try disabling and re-enabling
the extension, then restart Chrome.

Another test: open the DevTools Performance tab, record a page load, and
look at the Paint events in the timeline. With Flash Prevention active,
the first paint should already show a dark background color. Without it,
you'll see white as the initial background followed by a style recalculation.

Why this matters more than you might think

Beyond the annoyance, repeated bright-dark cycling during active browsing
has a measurable effect on eye comfort. Each flash triggers a brief pupil
contraction as your eyes respond to the sudden light increase. Across a
full work session with dozens of page loads, this adds up to meaningful
muscle fatigue in the eyes — the same mechanism that makes fluorescent
lighting exhausting over a long day.

For developers who have multiple monitors and frequently open documentation
in new tabs while working in a dark editor, eliminating the flash makes
the cross-context switching significantly more comfortable. It's one of
those quality-of-life improvements that's hard to appreciate until you've
experienced the alternative.