The Case for Tri-State Dark Mode Toggles – Bram.us

Skip to content

Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other.

While a two-state control might seem like the most straightforward solution, I firmly believe it’s flawed from a user experience perspective. Instead, we should all be using tri-state controls. Let me explain why.

A raised eyebrow

The whole thing started about two weeks ago. While browsing through Modern Web Guidance’s guides, I noticed that the dark mode guide advises authors to use a two-state control when offering a Dark Mode toggle to their users.

Use a two-state control

This had me raise my eyebrow, as I strongly believe that these type of controls should be a tri-state control.

Here’s what I wrote back in 2020 when I recreated a Dark Mode toggle by Josh W. Comeau using Vanilla JavaScript:

🤔 One thing that I personally find missing from Joshua’s implementation is a way to reset the override. To not diverge too much from his implementation I’ve added the reset option via a separate link. What ideally could be done is to use radio buttons (instead of a checkbox) or a dropdown to change between auto, light, and dark.

So, I went on and quickly filed GoogleChrome/modern-web-guidance-src#1182 to get the MWG guide fixed. I didn’t add too much reasoning, as I (wrongly) assumed this was a well lit path. A bit later, guide author Lea Verou replied, pointing to the UX motivation part of the guide, which reads:

DON’T expose all three states (system, light, dark). While the rationale is plausible — "Follow system (currently dark)" is a distinct user intent from "Always dark" — it provides suboptimal UX:

Users cannot meaningfully express intent for problems they don’t currently have. A manual toggle is a temporary comfort adjustment ("it’s too bright right now"), not a long-term preference ("make sure this never changes").

Two of the three options always produce the same visual result, violating the principle of feedback.

I’m not really convinced of that argumentation, because:

A manual toggle is a temporary comfort adjustment<br>→ Why shouldn’t it be a long term thing? The chosen option is persisted after all …

Two of the three options always produce the same visual result, violating the principle of feedback.<br>→ While the whole page might not change indeed, the selected option does change so there is local visual feedback.

Furthermore, solely focusing on the feedback part is ignoring other benefits of the tri-state control, including predictability and clarity — “Don’t Make Me Think”

The F2F, The Debate, and The Data

Coincidentally, the week after I filed the issue, the CSS Working Group Face-To-Face (F2F) took place in Berlin, where both Lea and I were present.

We spent some time trying to convince each other of our respective views, but quickly realized we couldn’t convince each other and also needed some numbers to back up our claims. Lacking some broader research about this topic, we both turned to social media to ask folks for their input.

I posted the following on Bsky and Mastodon:

QQ about Dark Mode Toggles on websites

How many options do you show to users?

Three values: System, Light, or Dark

Two values: Light, Dark (with one of them mapping to “System” behind the scenes).

Why the one or the other?

(I have an opinion about it, but I’m looking for external input)

Tallying up the results after about 24 hours, the answers were overwhelmingly in favor of a tri-state approach, with some of the replies even including some good arguments for their choice as well:

Tri-state: 43

Two-state: 7

(Note: 4 folks also answered that they don’t offer a control at all, and strictly follow the system preference — to me, that is the minimum you should do)

Simultaneously, Lea also ran a poll, asking if folks ever clicked on the override that matches their OS. While it’s good to try and get data, I found the question to be incomplete.

A bit later, Lea whipped up a case for a two-state control which she published on her blog: Dark mode toggles: two states are enough (you should read the whole thing).

However, after reading it, I still disagree. I firmly believe a tri-state control is the way to go.

The Problem with Two-State Controls

In short, I don’t believe that being able to force a site into a specific mode should be dependent on the time of the day.

The two-state approach highlighted in Lea’s post urges you to either store system or “the computed opposite of system” (i.e. light or dark — whichever is the opposite of the OS is) when using the control. If you carefully think about this, you’ll quickly realize that this runs into a very specific UX problem when the user’s OS is set to auto-change from light to dark based on the time of the day.

Imagine this scenario:

The user’s OS is set to...