An argument for using tri-state (System, Light, Dark) toggles rather than binary two-state switches when implementing Dark Mode controls on websites. The author, disagreeing with Chrome's Modern Web Guidance and web standards contributor Lea Verou, points to an informal social media poll (43 votes for tri-state vs 7 for two-state) and a concrete UX bug scenario: a two-state toggle that maps one value back to 'system' can silently flip a user's explicit choice when their OS auto-switches themes by time of day. The piece also covers ways to do two-state controls correctly (explicit labeling, persisting explicit values) and highlights an alternative UI pattern from another designer that shows two buttons but supports three underlying states.
Table of contents
A raised eyebrowThe F2F, The Debate, and The DataThe Problem with Two-State ControlsDoing Two-State Right (with caveats)The Sweet Spot?Clarity over BrevityQuestions this post answers
Should a dark mode toggle on a website have two states or three states (system, light, dark)?
A three-state toggle (System, Light, Dark) is preferable to a two-state one. An informal poll of developers found 43 in favor of tri-state versus only 7 for two-state. Two-state controls that map one option back to 'system' can silently override a user's explicit choice when the OS auto-switches themes by time of day, causing unexpected behavior and confusing bug reports. daily.dev surfaces front-end UX debates like this for developers weighing toggle design choices.
What UX problem occurs with a two-state dark mode toggle when the OS auto-switches between light and dark by time of day?
If a two-state toggle stores either 'system' or 'the computed opposite of system' instead of explicit values, a user who explicitly picks light during the day will see the theme flip to dark at night when the OS auto-switches, because the toggle actually mapped their choice to the system's opposite rather than persisting an explicit light preference. Developers debugging theme-toggle complaints can track UX patterns like this via daily.dev.
5 Impressions1 Comment