Reloading in the demo in dark mode still causes an initial flash of the light theme.

[tomasts248]

Can this be improved so that's there's no flash? I was considering your script because is similar to the way I implemented it on my site that is with a class that overrides custom styles but I have this very same problem which is kind of annoying for users in particular for dark mode as it blinds you for a sec. I forgot to mention: tested this on the demo site with remember preference on.

[tomayac]

Please see #20 for past discussion of this issue.

[tomasts248]

Ahh apologize was late and forgot to search the past issues, I did browse but I missed it.. Question/possible idea: if the user has scheme preference dark mode by default and we are overriding the styles with dark class then could this problem be mitigated for those users? does CSS color scheme detect the styles sooner? Most likely not but just to be completely sure.. Thanks!

[tomayac]

There’s nothing more you can do, unless you already know on the server what the user’s toggle will be set to, which is impossible.

[tomasts248]

I see, thanks for clarifying.

[m417z]

I also encountered this issue. A possible fix is to add a script snippet to apply the user-selected theme early during page initialization.

I wrote about it in more detail here:
https://github.com/m417z/dark-mode-toggle-flashing-fix#readme

Demo with the fix:
https://m417z.github.io/dark-mode-toggle-flashing-fix/without-flashing.html

[samstride]

@m417z , thanks for proposing the solution. I can confirm that this fix works for me. Good one.

@tomayac , any chance you could review the proposed fix and integrate it?

[tomayac]

@m417z: The proposed code is a bit in conflict with the original objective of the toggle, which is to interfere as little as possible with the loading of the other resources of the site you add the toggle to. I can see how it would be useful, though, in cases the developer can live with the trade-off. Do you want to open a PR and add your loading pattern as a third option how to use the toggle? You can also add a new demo page to the demo folder. Does that work?

[m417z]

@tomayac done, I opened a PR: #86