Trying out a Two-state Dark Mode Toggle

Lea Verou sparked some lovely discussions about dark/light mode toggles by asking a simple question: do these form controls need three options for two user-facing states? You have Dark mode (1). You have Light mode (2). You have System mode (inheriting your operating system preference) which is ultimately Dark (1) or Light mode (2). Typically the form controls have three options: System (auto) Light (saved on device as an override) Dark (saved on device as an override) In Lea’s proposal, you’d have: System (auto) Opposite of System (saved on device as an override) Toggling back to system/auto should always clear any saved override preference. I’ve added a little toggle to the footer of my own site (noting when the system preference matches the current selection with (auto)) and it looks like: Dark (auto) [Toggle] Light for users with a Dark system preference. Dark [Toggle] Light (auto) for users with a Light system preference. I’m enjoying it so far! I should also note that Bramus did…