Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Flashes when system prefers dark, but light theme is toggled #25

Closed
francislavoie opened this issue Mar 28, 2020 · 5 comments
Closed

Flashes when system prefers dark, but light theme is toggled #25

francislavoie opened this issue Mar 28, 2020 · 5 comments

Comments

@francislavoie
Copy link

francislavoie commented Mar 28, 2020 •
edited
Loading

This even happens on the demo site. https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html

Tested on both Chrome and Firefox.

System must be configured to prefer dark, then light theme must be toggled on and remembered in the site. On page change or refresh, sometimes you'll get a frame or two where the dark theme is rendered first, then it flips over to the light theme as expected. With the demo site, because there's a transition enabled, you get the dark theme fading back into the light theme.

Hopefully a workaround is found for this!
@francislavoie francislavoie mentioned this issue Mar 28, 2020
Closed
@tomayac
Copy link
Member

tomayac commented Mar 30, 2020

Thanks for opening the issue. The problem you're describing was already discussed before, I have provided an answer in #20 (comment). Hope this helps. I'm closing the issue, but feel free to comment again. Cheers!

@tomayac tomayac closed this as completed Mar 30, 2020
@francislavoie
Copy link
Author

francislavoie commented Mar 30, 2020 •
edited
Loading

Ah thanks, I searched for the wrong words 👍

You said:

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.

It seems to me like the toggle code doesn't run until <dark-mode-toggle> is encountered (I'm making this assumption because if the JS is in the <head> but the toggle element is not rendered, nothing happens). I put <script type="module" src="https://unpkg.com/dark-mode-toggle"></script> as early as possible in the <head> but it still happens. Is there anything else I could do to make it load earlier?

@tomayac
Copy link
Member

tomayac commented Mar 30, 2020

You could preload the module:

<link rel="modulepreload" src="https://unpkg.com/dark-mode-toggle" crossorigin>

@francislavoie
Copy link
Author

Hmm, looks like that's still experimental https://caniuse.com/#feat=link-rel-modulepreload

@tomayac
Copy link
Member

tomayac commented Mar 30, 2020

It is experimental. But where it works, it helps. And where it doesn't work, it doesn't cause harm.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tomayac @francislavoie