markteekman / accessible-astro-components

A set of Accessible, easy to use, Front-end UI Components for Astro.

Home Page:https://accessible-astro.netlify.app/accessible-components/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Unpleasant flash of styles while in dark mode, navigating between pages

djmtype opened this issue · comments

When opting into dark mode via button toggle, then navigating from page to page, the theme defaults to light for a split second. Therefore, it creates an unpleasant flash of bright light. This is apparent on slow connections. Test it in devtools by switching network connection to Fast 3G, then navigate from page to page.

Watch this screencast: https://cloudup.com/cdNhCTAgHmM

While I'm not using your darkmode component in my project, I ran into a similar situation. I found setting the JS script to is:inline instead of default or module helped me prevent the flash of unwanted style in my case.

Hey @djmtype, thank you for submitting this issue and taking the time to explain it so well with an additional screencast. It is much appreciated 🙂 I'll take a look at it and I'll test your suggested solution of setting the script to is:inline.