> 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. Leaky abstractions and false affordances both give users an incorrect mental model of the system.)

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.

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.

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

Why does every website even need to provide its own toggle in the first place? How often do people use these, really?

(I don't get the "everything needs to support dark theme" thing either tbh)

This is a terrible idea. It's just removing functionality in order to remove a button.

With this, there will suddenly be a bazillion frustrated users who want to force an exception to their timed dark/light mode cycle, but can't because this proposed system hides how to do that. And even if they look up how to do it, they have to either wait for a specific time of day to make their change, or they have to temporarily change their system settings in order to change the program/website-specific setting.

Meanwhile, people who don't care or don't understand will just leave it on the default and probably not even look at the settings page. And everyone is used to seeing "system default" as an option at this point, anyway.

Net effect: no benefit, and some users now upset.

Why change what isn't broken?

Isn't the actually-simple answer here "Pick a default. If the user agent specifies a preference, respect it."

Now there's no UX, it just does something reasonable regardless, and if the user has already opted in to color mode management, it respects their declared choice.

Users who are power user enough to want to override their light/dark mode setting per-site can use a browser extension to let them do exactly that on the websites they want to target.

Am I missing something?

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.

this all seems to fall into trap of most UI design writing, where people write blog posts about what users want, what users think, and what users understand, without actually doing any user testing.

unlike everybody else in this comment section, i like the two-mode toggle. but that's just my opinion. without user testing numbers, an article saying "users like this better" is useless.

But...there is a solution that works (although it may be a bit confusing at first). A toggle with two buttons, dark and light. Both cannot be pressed at the same time, but both can be unpressed at the same time. That's the auto mode, and the ui can be tweaked to show a little label in between or below.

In auto, none of the buttons is pressed (and preferable a small label that says auto is shown). Pressing dark/light will force that mode, enable that button and remove the auto label.

In dark/light mode, you can press the other button to enable the other state. Or you can press the current button to disable it, and switch to auto. This last one is the confusing-at-first interaction, but makes sense if you think about it (it's like saying: I want dark / I want light / I don't care)

New requirement just dropped: "Switch to light mode during more than 50% solar eclipse".

Imagine thinking your website is important enough to have its own settings UI lol

> “Whatever the system says” is not just one extra option. It’s also one extra weird option. It doesn’t feel like the other two.

It's wrong to conflate the `prefer-color-scheme` media query with “What the system says”, meaning the OS-level dark/light option. For most people this is probably true, but I prefer sites that work this way because I use two Firefox extensions to set it globally or on a per-site basis regardless of what my OS is set to.

- https://addons.mozilla.org/en-US/firefox/addon/toggle-dark-m...

- https://addons.mozilla.org/en-US/firefox/addon/darkreader/

Strongly believing it should only be two is symptomatic of the worst ideas in UX/UI. Pretty much one of those tiny steps toward "Idiocracy."

Do not hide what the machine is doing from the user in this way, this is how so many of the bad things happen.

As a user, I find the three "dark", "light", "auto" button situation way less complex then a toggle that keeps its state only if my choice does not align with system default.

Both Marcin and Lea are ignoring users who have automatic sunset-to-sunrise dark theme switching.

This is not a novelty but a built-in feature called “Auto” Appearance in MacOS, iOS, iPadOS. Similar feature exists in Android and KDE.

Even in the 1990s, developers of the HID specification knew that the keyboard pictured at the bottom of the article was wrong. They wrote in the power management spec that interface devices should conditionally send wake events, and that a dedicated wake key was not necessary. Microsoft said:

"For example, a keyboard could include a special-purpose power management button (for example, “Power”) that, when pressed during a system sleeping state, generates a wake event. Alternatively, the button(s) on mice and other pointing devices could be used to trigger a wake event. "

Surely the toggle is "system setting is what I want" or the inverse?

That's a CSS @media not

Well, that's pretty damned moronic, is what that is.

Imagine the user confusion when he sets the interface in light mode and a couple of minutes later this changes automatically to dark mode because sun sets.

this is wildly anti-user and turns a preference->behavior mapping of

dark -> dark

light -> light

os preference -> os preference

into

dark -> impossible to know with just this info

light -> impossible to know with just this info

os preference -> impossible to set via the app

if you absolutely have to account for the third case, then you need an explicit option for it and should be able to tell the user what their current os preference is. all the information i need to make a decision should be present in the interface, and the underlying code should do what the fuck i tell it to, not what it thinks i meant.

[dead]