Dark mode toggles: two states are enough

In a recent CSS‑Tricks post, front‑end expert Lea Verou challenges the common three‑option UI that offers “Light,” “Dark,” and “System” choices. She demonstrates that a two‑button control can convey all three intents: when a visitor first clicks the visible option, the site records an override in localStorage and thereafter respects that setting, falling back to the operating‑system preference only when no override exists. The discussion, amplified by a tweet from Chris Coleman, highlights that the extra “System” button adds visual noise without improving the user’s primary goal—accessing content—especially when the toggle sits in a site’s header and is always visible.

The debate taps into a broader shift toward minimalistic, context‑aware UI. Browser vendors have already exposed the CSS media query prefers-color-scheme, allowing sites to auto‑detect the OS theme. Many designers now treat dark mode as an ambient setting rather than a per‑site preference, mirroring how mobile platforms expose a global dark‑mode switch. By reducing the toggle to a single “Light” or “Dark” button that only appears when it diverges from the system default, developers align with this trend and avoid the cognitive load introduced by a tri‑state control. The approach also sidesteps the need for a separate settings panel, which some argue is justified only for complex theming schemes or when the toggle lives outside the main navigation.

Looking ahead, the two‑state model could become a de‑facto standard for persistent theme controls, especially as browsers continue to expose system‑level preferences and as users grow accustomed to OS‑driven dark mode. However, sites that support multiple custom palettes or that need to honor user‑specific branding may still require a richer UI, and designers must ensure that the stored override updates correctly when users switch back to the system default. Monitoring how major frameworks (e.g., React, Vue) implement theme toggles and whether browsers add native UI for theme overrides will be key to assessing the longevity of this minimal‑toggle recommendation.