Today I scratched my itch of implementing a dark mode toggle without JacaScript. The implementations I saw typically revolved about adding a 'dark' class to body via JS and then controlling it with JS handlers.<p>Thanks to `:has()` selector [0], that passed 90% browser compatibility [1], it is possible to avoid JS.<p>My implementation uses CSS variables combined with a checkbox, `:checked`, and `:has()`. It is simple, yet supports color scheme preference and updates toggle's label based on active mode.<p>[0]: <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/:has</a><p>[1]: <a href="https://caniuse.com/css-has" rel="nofollow">https://caniuse.com/css-has</a>