CSS Theme Switcher Example

It’s not impossible to avoid the dark mode flash in a color theme switcher

Theme switchers are a popular way to allow your site’s visitors to customize their experience, but if there’s a “theme selector”, a flash of the wrong theme will show up when the user has chosen a theme that’s not the default.

This has been considered unfixable on the frontend:

I’m not convinced there is a good way to avoid [flash of inaccurate color theme] without a server-side language or force-delayed page renders. Chris Coyier

However, with the introduction of Netlify Edge Functions, we can implement a CSS-based theme switcher that doesn’t suffer from the flash of inaccurate color theme and doesn’t require deploying a server. This site, for example, is plain HTML with no build system or backend.