Repository navigation
Reloading in the demo in dark mode still causes an initial flash of the light theme. #77
Description
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.
Activity
tomayac commentedon Jul 24, 2023
Please see #20 for past discussion of this issue.
tomasts248 commentedon Jul 24, 2023
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 commentedon Jul 24, 2023
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 commentedon Jul 24, 2023
I see, thanks for clarifying.
m417z commentedon Aug 14, 2023
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 commentedon Sep 13, 2023
@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 commentedon Oct 2, 2023
@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 commentedon Jan 16, 2024
@tomayac done, I opened a PR: #86
Merge pull request #86 from m417z/flashing-fix