Trying out a Two-state Dark Mode Toggle

Lea Verou sparked some lovely discussions about dark/light mode toggles by asking a simple question: do these form controls need three options for two user-facing states?

You have Dark mode (1). You have Light mode (2). You have System mode (inheriting your operating system preference) which is ultimately Dark (1) or Light mode (2). Typically the form controls have three options:

• System (auto)
• Light (saved on device as an override)
• Dark (saved on device as an override)

In Lea’s proposal, you’d have:

• System (auto)
• Opposite of System (saved on device as an override)

Toggling back to system/auto should always clear any saved override preference.

I’ve added a little toggle to the footer of my own site (noting when the system preference matches the current selection with (auto)) and it looks like:

• Dark (auto) [Toggle] Light
• Dark [Toggle] Light (auto)
• Use light theme (shown) and Use dark theme (auto) for users with a Dark system preference.
• Use dark theme (shown) and Use light theme (auto) for users with a Light system preference.

I’m enjoying it so far!

I should also note that Bramus did write a criticism of the approach, noting a special case for users that have their system preference switch automatically (which I do personally use). I do think the simpler control and the simpler interaction (every toggle has a noticeable visual effect on the page) is worth the tradeoff there (personally). The strongest counterargument is that one of the three options on the tri-state toggle has no visual effect at all.

Related: Lea’s reactions follow-up post: The best dark mode toggle is probably none.