Show HN: A Dark Mode Toggle Without JavaScript

#1

Post by TymekDev » Thu, Jan 11, 2024, 8:13 PM UTC

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

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

Re: Show HN: A Dark Mode Toggle Without JavaScript

#2

Post by DHPersonal » Thu, Jan 11, 2024, 8:34 PM UTC

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.

Re: Show HN: A Dark Mode Toggle Without JavaScript

#3

Post by baobaba » Thu, Jan 11, 2024, 8:42 PM UTC

Thanks for sharing! Very cool.

Re: Show HN: A Dark Mode Toggle Without JavaScript

#4

Post by numtel » Thu, Jan 11, 2024, 9:54 PM UTC

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.

Re: Show HN: A Dark Mode Toggle Without JavaScript

#5

Post by TymekDev » Fri, Jan 12, 2024, 5:34 AM UTC

numtel wrote: post #4

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.

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.

Re: Show HN: A Dark Mode Toggle Without JavaScript

#6

Post by TymekDev » Fri, Jan 12, 2024, 5:39 AM UTC

DHPersonal wrote: post #2

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.

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.