HN Explorer

Show HN: A Dark Mode Toggle Without JavaScript (tymekdev.github.io)

4 points by TymekDev ↗ HN
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.

Thanks to `:has()` selector [0], that passed 90% browser compatibility [1], it is possible to avoid JS.

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.

[0]: https://developer.mozilla.org/en-US/docs/Web/CSS/:has

[1]: https://caniuse.com/css-has

5 comments

[ 276 ms ] story [ 642 ms ] thread
DHPersonal
This is really cool and a great example of the upgrades to CSS. The benefit of JavaScript would be setting a state in localStorage to remember the light/dark value that was set, as yours does not remember what was set after a shift+f5 refresh of the site.
TymekDev
With JavaScript you could make it a three state toggle: light, dark, and auto. The last one would allow to to back to the default - no preference.

I thought this might use indeterminate checkbox, but that wouldn't be necessary. 'Light', 'dark', and lack of thereof in localStorage already amount to three distinct states.

baobaba
Thanks for sharing! Very cool.
numtel
I'm sure it'll make it to Firefox for Android soon. I would imagine these "in page" toggles will fade away as the OS makes the switcher more prominent. In Gnome, it's right in the main menu next to the volume.
TymekDev
It's already there in Firefox for Android! If you take a look at MDN, it states it's available since 121 that released on 2023-12-19.

In fact, I am using it right now, and the example works without issues.