screen flickers on load w/dark mode enabled

[EverlastingBugstopper]

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

[EverlastingBugstopper]

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