Not sure about Windows or macOS, there users probably stick with default setting anyway, but here on GNOME I have quick access to "Dark Style" toggle in quick settings, just one click away.

We could start a long discussion, should websites just follow system settings, or add their own custom controls, where you have different settings for each website. Along with dark mode switching, we should consider accessibility controls, and cookie settings too.

From a developer standpoint I'd prefer to reflect system settings.

Original author here. I don't like the idea of using JS on my website and I don't think that it is possible to create a light/dark mode switch with only CSS. But you are right, most users don't know how to do that.

Would be perfectly reasonable to use js over this feature.

Yes for sure, but my personal policy is not using JS. Anyway my site doesn't have so many visitors ;-) People come, stay for a few seconds and then leave forever.

Hahah old school hate for js. Very good.

However, it would probably be possible with very minimal JS a la how Tailwind does it, toggling a .dark class in the body element and setting the dark mode variables and colors there.

But adding onclick and window.open() JS functions is somehow justifiable, over using simple <a> links? Of course, there might be some specific case you are solving here, so it would be very educational to hear this out.

You can! Trick is to use the checkbox:selected hack to apply styles, in addition to the colour-scheme media query.

It is possible; just too convoluted/subpar imo. You can use a checkbox's check/uncheck status. One such codepen from quick google: https://codepen.io/shadowfaxrodeo/pen/JjbzNMz

Cool thank you for sharing this! I might implement this on my site.

If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site.

Sites should follow the browser scheme (which usually follows OS) and can optionally provide a button to switch. This is possible with CSS only but too convoluted; one liner JS is enough for such optional cases.

> If one can't set lightness mode in their OS, they almost certainly won't benefit with a button on the site.

What could you possibly be basing this theory on?

For me what's compelling here is "auto-dark mode". As a user I don't want to keep making CSS changes to every site I visit to that's light mode. I wish the web in general had these 2 styles and automatically inferred from my device that "This person is a vampire, give him dark mode"

Those who don't know how to do that probably don't care anyway.

If they don't know, how do you know they don't care? I find that if I show people a nice feature they did not know about, they often like it and then use it. It's just that not everyone is a tinkerer who first feels the need to dive into the features of a new software.