You'd be able to do this with the matchMedia API: https://developer.mozilla.org/en-US/docs/Web/API/Window/matc...

I didn't know about that, thanks for that!

More javascript is almost never the best solution to any problem, particular when it’s shown that css can achieve the same result.

My argument is that CSS doesn't achieve the same result; it forces one particular mode on you instead of allowing a choice.

You have all the choice in the world. Use whatever tech you want (browser js, server side templating, client side xslt, etc) to have an attribute on the body element indicating opt-in status, and use that in your media query to target only the users who want it.

With the css solution it’s doable on a site that has no javascript.

The right place for the switch in this case is the browser. The browser should have a button for light/dark/system, defaulting to system. And CSS should follow that.

JS should not be involved, and we don't need every site to have its own version of the switch, located in a different place and looking different.

You don't need Javascript to implement a switch that changes from light mode to dark mode. That can be easily done in CSS. I've done it on web sites to switch to a high-contrast color scheme for people with vision difficulties.

You could easily apply or remove the css via Javascript to allow enable / disable of the feature.

Exactly. This is going to be the simplest browser extension anyone has ever written, if someone hasn’t done so already.