Flash of wrong styles

[scsskid]

Great project overall, its a nice inspiration!

All solutions I discovered on the web with a permenent switch and also my own custom code suffer from a flash of the wrong styles at some point before the styles accoring to localStorage setting is applied. This happens in latest Chrome, but not in Desktop and Mobile Safari.

your regular demo does (on page reload) and v8.dev also, only your barebones demo seems fast enough

is it just not possible to avoid a flash (e.g. white background flash before dark background gets applied) without blocking the rendering or hiding the page or do have a suggestion?

[tomayac]

The problem really is that you’re actively “fighting” the browser. The browser is like “oh, the user prefers dark, so I better adapt and turn the body background and other UI elements dark, too”, but then, via the toggle, you override the preference, so there’s this flash of white. Even when you display: none everything, the browser still has the baseline assumption of how a “blank” document in the color scheme in question should look like, and, with an overridden user preference, this assumption is just wrong.

So long story short, there’s no way to prevent this, but you can limit the negative effect by making sure the toggle code executes as soon as possible during the loading phase of your page. Hope this helps somewhat.

[scsskid]

thanks for your answer!