Please add / You really should add
<meta name="color-scheme" content="light dark" />, refAs an aside; my dark reader dark inject breaks the website layout on that website. I’ve never seen that on any other website.
As someone less experienced but currently learning HTML, if you are trying to do the bare minimum of JavaScript, is there a point in having it in the HTML vs the CSS?
The meta tag makes your browser default to dark for a user’s dark preference. That means you don’t need additional CSS at all for a baseline. It also means if you forget or miss a dark or light alternative style for some element, the browser defaults already cover them.
Thinker mentioned the separate CSS loading separately. Which can lead to relayouts, in the worst cases flashing like they mentioned, but typically just increased loading time until first render, and less robustness against connection issues (html loads but css doesn’t).
It’s likely a small difference, but the main advantage of having it in the HTML is that it’s immediately available, so you don’t have to deal with the flash of unstyled content being in the wrong color scheme.
Source: https://css-tricks.com/almanac/properties/c/color-scheme/#theres-a-corresponding-meta-tag-too
Thats definitely a better argument than most of the ones I read, which were always about overly complicated JavaScript setups for switching a million variables for light-dark support, instead of just using the CSS stuff.
Literally the only thing I can understand needing Javascript for is a persistent bit on the toggle so it doesn’t constantly change.
