The Prompt
Next a another The Prompt & The Results post: Read this article above how a dark / light mode toggle should really work. TLDR; just two buttons. Make a component that will eventually replace the component in the Footer … done Lea’s recommended way. For posterity because this will actually replace what’s in the Footer use or make a copy of the component in the Footer for future side by side comparison. If that’s a hassle, a screenshot would suffice. Go!
The Results
Both controls below are live and change this page’s theme, so try them side by side. The table underneath shows what’s stored.
Light, dark, or system. Whatever you press is stored as-is, “system” included.
Light or dark. The one you’re seeing is pressed. Choosing the one that matches your system clears the stored preference.
- You're seeing
- …
- Your system prefers
- …
- Stored preference
- …
How it works
- Two states on the outside, three underneath. The control only ever shows light and dark, with the one you’re currently seeing pressed. Under the hood there are three states: an override to light, an override to dark, or nothing stored, which means “follow the system”.
- First press. Pressing the other button switches you to the opposite of what you’re seeing and stores that literal value, so it survives the next visit.
- Pressing back. If you press the button that matches what your system already prefers, the stored value is removed rather than saved. The site goes back to following the system, instead of being silently pinned to a value that only happens to match it today.
- When the system changes. If your OS flips to dark at sunset, a stored override stays put, because you asked for it. Only “follow the system” follows.
- No “system” button. Nobody comes looking for a theme toggle to declare that they’d like to follow their system. They come because the page is too bright or too dark right now. Two buttons cover that, and the third state takes care of itself.
The new control stores its choice under the same key the site already uses, so the site’s existing start-up script (which applies the theme before the page paints) keeps working unchanged, and swapping it into the footer is a one-line change.
Update: the results of this post were implemented in the footer the next day. The three buttons at the bottom of every page are gone, and the two-button toggle above is now the real one. The copy of the old control stays here for the side-by-side.