DEV Community

Discussion on: Dark/Light theme switcher with HTML, CSS & Javascript Only

Collapse
jmau111 profile image
Julien Maury

Nicely done. I see only one caveat with this method: Flash of inAccurate coloR (FART).
That's because the js is placed at the bottom of the page. Besides, it does not take into account user system preferences.

As far as I know, you're kinda forced to put a render-blocking js at the top of the head section to prevent the FART effect, and you can use if (window.matchMedia('(prefers-color-scheme: dark)').matches) to detect user preferences in js.