- Light/Dark/System Theme Setting Design
Lea Verou published a post titled ‘Dark mode toggles: two states are enough’, discussing the UX of light-dark toggles. I can understand the reasoning, but I disagree with it. The default based on selected theme feels a tad too magic to me (and not in the intuitive way). It feels like it is taking my control away as a user.
Historically, I’ve been lazy with my theme toggle on websites. I’ve typically reached for a cyclical button which toggles between light, dark, and system default. However, this is a far from optimal approach and has major usability issues. It isn’t an intuitive interface pattern:
- You can’t see all the options until you’ve cycled through them.
- Switching between the system theme and the explicit theme that matches it doesn’t trigger a change, which causes a weird interactivity disconnect.
However, it is compact, and compactness is one of the main points Lea argues in her blog post, and I do agree that three-state toggles with a button for each are too much. The approach does show the system setting as an explicit setting, however, which Lea argues shouldn’t be exposed to the user. Instead, I’ve come to find a different approach I prefer:
By default, the page follows the system default. Pressing the light mode icon sets the page to light mode. The dark mode icon sets it to dark mode. If the user wishes to return to the system default, they click on the active theme button again, which toggles it off. It only takes up the space of a two-state toggle while representing all three states in an intuitive way. At least, it has been intuitive and immediately understood by the great majority of people I’ve tested it with. The minority usually assume it can’t be returned to a system setting.
This approach treats the system option as something slightly different, too, which feels correct given that system is fundamentally different to light and dark. It also avoids the pitfalls of too many displayed items or the added complexity of a drop-down. It feels like a reasonable middle ground. I look forward to when we get this toggle as a native part of browser chrome eventually.