Two-State Theme Toggles: When Less UI Does More

Lea Verou has opened up a sharp discussion about how we let visitors switch between light and dark color schemes. At issue is the common tri-state pattern that presents three visible options:

  • Light
  • Dark
  • System

The critique is aimed squarely at the System option. Why give it permanent screen real estate, the argument goes, when a good two-state control can express all three states? A visitor with no explicit preference simply inherits the system setting, and an override is one click away whenever that preference first matters.

In that model, the toggle only needs to show what a user would actually want to *change* to, based on what is already active:

  • Light by default? Show a Dark button to override that.
  • Dark by default? Show a Light button to override that.

The result is a leaner interface: a single action exposes the other scheme, and the choice gets remembered in localStorage for subsequent sessions.

Why Fewer Options Reduce Friction

The case for trimming the visible state count goes beyond visual minimalism. Theme toggles are typically embedded in persistent site chrome, like a header or main navigation. That means every option shown is always vying for a visitor's attention and every choice adds a bit of cognitive overhead. A visitor's main goal is reading or browsing content, and the switch is an entirely tangential control.

Even the edge case of toggling back to a previous state — say, from Dark back to Light when the system is already Light — is not worth lingering over. Whether clearing the override or pinning a new one, this action only matters when the OS setting diverges from the chosen theme. And if it does, the fix is a single click away. It's so cheap to correct that the ambiguity becomes practically irrelevant.

When a Tri-State Toggle Still Makes Sense

The two-state guidance does not apply everywhere. Verou identifies two scenarios where three visible states are acceptable:

  1. When the color scheme selection lives in a separate settings panel, away from the main content flow and the visitor's primary intent.
  2. When the site offers variations that go beyond typical light/dark pairs, meaning more than two schemes are in play.

There is also a middle ground worth considering: building preference persistence into the interface, but letting the browser's own setting serve as the default. In that arrangement, a tri-state control sitting higher in the page chrome feels more forgiveable, since the override option can be deferred until it matters.

Verou has since published a follow-up distilling the broader conversation her original post started. For persistent, always-visible toggles in navigation areas, the two-state pattern wins. But the genuinely minimal solution may be no toggle at all — letting the system default handle color scheme selection without any intervening control.