Dark mode toggles: two states are enough

A good two-state toggle can actually express all three data model states. Until recently, if you looked at most websites with a theme toggle[1], you’d find three options: Light, Dark, and System. Examples of tri-state dark mode toggles. In (LTR) reading direction: Ant Design, Red Hat Design System, Web Awesome, Excalidraw, Taiga, Astro, Hero UI. Thankfully, these days the trend has shifted towards a simpler two-state toggle, but tri-state ones are still incredibly common. Examples of two-state dark mode toggles. In (LTR) reading direction: Vitepress, Material Design, Adobe Spectrum, Radix, ShadCN. The rationale sounds plausible: “System” is a different intent than “Light” or “Dark”! One is a policy (whatever my OS says, do that) The other is a value (dark, forever, I don’t care what my OS says.) Surely, users should be able to express that intent! Except, real users don’t generally seek out dark mode toggles to express intent for things to stay as they are, they seek them out when…