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.