screen flickers on load w/dark mode enabled
Opened this issue · 1 comments
my guess is that there's some client-side JS that determines if a user wants dark mode, and then it will run an animation transitioning from light mode to dark mode. unfortunately that animation looks a little bit flickery and on reloads it doesn't seem to remember that you're on dark mode. it keeps running that client-side JS and animation sequence every time. This isn't urgent but thought I'd document the issue here 😄
in my video i'm doing hard refreshes to more clearly show the animation, it's a bit quicker on regular reloads (presumably because there's some sort of caching) but the animation is still there, albeit a bit less noticeable.
dark-mode-flicker.mp4
i think we could eliminate most of these flickers if we duplicated the dark mode styles and nested it in this media-query:
@media (prefers-color-scheme: dark)
then it would only flicker if the system preferences preferred light and they had set it dark on this site (which is likely rare).
i implemented dark mode for my own website a while back - source here: css, js