Why Your Dark Mode Toggle Should Only Have Two Options
"Solving a largely imaginary user goal"
Lea Verou argues that user-facing dark mode toggles should only show two options, light and dark, hiding the 'follow system' behavior behind a smart toggle. This reduces cognitive load and avoids exposing implementation details. The article critiques tri-state toggles as implementation-driven UI, using a keyboard analogy. Despite some flaws in the article's presentation, the core idea is compelling for better UX design.
Tri-state toggles are implementation-driven UI. One of the most common UX mistakes is designing UI around the underlying data model instead of user goals.
- TimTheTinker
> One of the most common UX mistakes is designing UI around the underlying data model instead of user goals.
It's far worse to give users a false mental model of the system. If the underlying system is complex, but that's out of your control, then it will create confusion and frustration in users to paper over it. Please don't do this!
That is, unless you can create a nearly leak-free abstraction. The example given in the article is anything but leak-free.
(This kind of design error reminds me of the skeuomorphism debate nearly a decade ago. Though I do miss beautifully detailed app icons and overall whimsy, in-app false affordances and leaky abstractions both give users an incorrect mental model of the system.)
- namuol
There’s no better way to ruin usability than to hide how the system actually works in an effort to make it “easier”.
Make it as simple as possible, but no simpler. Anything else is deceptive.
- dgellow
I might be missing something, I read both articles and do not understand the issue with 3 options. People interact with the theme change maybe once a year or so, a tiny amount of friction in that case is a non issue if that makes it simpler for the user to actually set the theme value they want (system default, light, dark). It really feels that they started with the idea that it should be 2 options, then try to come up with an argument
- weinzierl
Letting the system do things for the user is risky enough. Taking away the unambiguous way to turn the automatism on and off just adds insult to injury. This suggestion is not simplification, it is complication.
Personally I'm totally fine with light/dark/auto but if you really must simplify I see only two true ways:
1. Just offer light and dark. No auto. Whether auto works is out of your control anyway. Users who know and want auto have to switch manually.
2. Just offer auto on/off. Default is off and off is light mode. User who want dark mode will figure out how to configure their system.
- jmull
The most important thing is to default to the user’s system setting.
Then you (and your users) only need the toggle, if at all, for edge cases.
(If the user cares, they likely will have set system settings the way they like them, and if they don’t care to, it’s pretty unlikely your web site is special to them. It would really just be for users who care but are somehow forced to use a system that doesn’t support the settings they want, and for dev/testing.)
But I agree with the conclusion of the article. If you do have a toggle, it makes more sense to just have the two options. Users click it to say, “I want it the other way right now.” After that, it makes a lot more sense to assume they want it to keep being the way they want than not. And how do you know what that is? Because they’ve taken the time to specify that in the system settings. Or they haven’t. Because they didn’t care to. In which case you still aren’t doing something they didn’t want.
A UI where you just whack it until it does what you want (and then keeps doing it) is perfect for we tailless monkeys. One where you have to stop what you’re doing to think about your previous life choices and whether you ought to continue to make them is maybe a little too much for each web site.