I started looking at this as I'd like to add one to a few of my sites, but soon started down a rabbit hole:
1. Many code examples just handled light/dark and once clicked you cant easily get back to the system setting.
2. Seems folks going about this many different ways.
3. The Flash of Unstyled Content issue.
4. Im a big tailwind fan, but I think a clean implementation should exist just with the most vanilla CSS/HTML and very light use of JS as necessary.
5. Storing the preference once set
6. Discussions on adding this "simple" (seeming) feature bought out a wall of comments when someone suggested adding it right here on HN, and as of today, HN itself still doesnt have this "simple" feature.
I did once a simple implementation: light, dark and system.
Data was stored in localstorage. The default was system and used quite of bit scss to implement.
Effectivly it consisted of 3 parts: and theming mixing that accepted the background and foreground color, an theme mixin that generated the surrounding "body.$schema" and "@media (prefers-color-scheme: $schema)" and at last an fallback block that only activated when it doesn't support prefers-color-scheme.
The javascript was pretty short not even 50 lines and no dependency.
Today i would do it a lot different. The stages go into layers with the fallback first. The javascript would be splitted in an early part that loads the setting and an later part which does the settings change.
> Anyone implemented a nice three-state dark mode toggle?
Anecdotally, I basically never adjust light/dark mode, I pick what I want once and leave it alone forever. (Is this common? Does anyone have telemetry about it?)
So the only reason for it to take up prominent real-estate is to ensure it is found at the same initial moment that I want to find it. Something like that could also be done with some kind of quickstart or initial-settings wizard.
So my only-half-joking crotchety old-school response would be for a settings screen, with three mutually exclusive option-bullets.
I started looking at this as I'd like to add one to a few of my sites, but soon started down a rabbit hole:
1. Many code examples just handled light/dark and once clicked you cant easily get back to the system setting.
2. Seems folks going about this many different ways.
3. The Flash of Unstyled Content issue.
4. Im a big tailwind fan, but I think a clean implementation should exist just with the most vanilla CSS/HTML and very light use of JS as necessary.
5. Storing the preference once set
6. Discussions on adding this "simple" (seeming) feature bought out a wall of comments when someone suggested adding it right here on HN, and as of today, HN itself still doesnt have this "simple" feature.
HN doesn’t have lots of simple features. I wouldn’t read too much into that.
I did once a simple implementation: light, dark and system. Data was stored in localstorage. The default was system and used quite of bit scss to implement. Effectivly it consisted of 3 parts: and theming mixing that accepted the background and foreground color, an theme mixin that generated the surrounding "body.$schema" and "@media (prefers-color-scheme: $schema)" and at last an fallback block that only activated when it doesn't support prefers-color-scheme.
The javascript was pretty short not even 50 lines and no dependency.
Today i would do it a lot different. The stages go into layers with the fallback first. The javascript would be splitted in an early part that loads the setting and an later part which does the settings change.
> Anyone implemented a nice three-state dark mode toggle?
Anecdotally, I basically never adjust light/dark mode, I pick what I want once and leave it alone forever. (Is this common? Does anyone have telemetry about it?)
So the only reason for it to take up prominent real-estate is to ensure it is found at the same initial moment that I want to find it. Something like that could also be done with some kind of quickstart or initial-settings wizard.
So my only-half-joking crotchety old-school response would be for a settings screen, with three mutually exclusive option-bullets.
Credit to Ben Schwarz for providing me with this excellent implementation.
Supports: Light/Dark/System as well as storing the user preference. Implements via a simple dropdown select box.
https://codepen.io/benschwarz/pen/bGPyboB