How to approach colour mode switch

[cityremade]

Assuming we have now unified colour palette and we can choose to load any set of root variables (light, dark, custom... ).
How?

At the moment we have a html.dark-mode class switch which is a known practice but in our case it creates redundant rules and fragmentation.

Would it be a script in the document head that checks for user settings and sets selected palette as root colours?

https://stackoverflow.com/questions/37801882/how-to-change-css-root-color-variables-in-javascript

Looks like meta tags can do something to help too https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name

Examples from codepen
https://codepen.io/rajatkantinandi/pen/VOJMGm
https://codepen.io/im1010ioio/pen/QWYVdJw
https://codepen.io/barthy-koeln/pen/EBzxje - this one looks good

Any more suggestions?