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 system setting option being lumped with the selected theme feels a tad too magical to me (and not in the intuitive way). It feels like it is taking my control away as a user.
I reliably fall exactly into What if users get confused? when interacting with the demo. Even with it front of mind I still stumble over the same interaction while switching it back and forth.It isn’t fitting my mental model of how I expect it to function and it really twists my mind around trying to comprehend it.
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.