Dark mode toggles: two states are enough

Two-state dark mode toggles are more user-friendly than tri-state options. Users typically do not seek to express intent for things to stay unchanged. Instead, they use toggles when something needs to change. For instance, on a documentation site, users are there to look something up. A landing page visitor may be evaluating the product's suitability.

A media reader is on the site for the news. A graphics app user wants to draw something. Tinkering with the theme is not a primary goal; users only adjust it when things are off. The tri-state control aims to address an uncommon user need that doesn't justify the added complexity and UX friction. In fact, tri-state toggles are prevalent, but that doesn't make them good.

The underlying model should have three states, but only one is relevant to users at any given moment. A dark mode toggle is a temporary comfort adjustment, not a long-term stance on color schemes. The third state assumes a user scenario where a website looks fine, but the user seeks a dark mode toggle for future-proofing, which is an unnatural interaction driven by an unreal user goal.

Even the strongest advocates of tri-state toggles admit it's rarely needed or a one-off scenario. While adding a third state may not hurt, UI complexity carries a cost. It increases cognitive load for interacting with the control and influences design decisions. A two-state toggle is compact and efficient, often as simple as a single icon that switches to another when clicked.

Tri-state controls, while common, often lack the system preference option, making the "System" state unreachable once selected and violating usability principles such as user control and freedom. Two-state toggles should still be able to express all three states. Exposing all three states in the UI is simply leaking the underlying model.