Light/Dark/System Theme Setting Design

Lea Verou penned an opinion piece titled 'Dark mode toggles: two states are enough,' addressing the user experience of light-dark toggles. While I grasp the rationale behind her argument, I find myself at odds with her opinion. To me, incorporating the system setting option with the chosen theme feels slightly too arbitrary (and not in an intuitive manner). It seems to take away my control as a user.

When interacting with the demo, even with the system in mind, I still find myself puzzled by the same interaction when switching back and forth. It doesn't align with my mental model of how I expect this feature to function, and it genuinely twists my mind as I try to understand it.

Traditionally, I've been lax with my theme toggle on websites, often opting for a cyclical button that cycles between light, dark, and system default. However, this method has significant usability drawbacks. It's not an intuitive interface pattern, though, and I agree with Lea that compactness is a crucial aspect of her proposed solution, as she argues that three-state toggles with a button for each are too cumbersome.

While the approach does highlight the system setting as an explicit choice, which Lea contends should not be exposed to the user, I've developed a preference for an alternative method.

My preferred approach involves setting the page to the system default by default. Pressing the light mode icon changes the page to light mode, while pressing the dark mode icon sets it to dark mode. If the user desires to revert to the system default, they must click on the active theme button again, which toggles it off. This approach condenses all three states into a two-state toggle while ensuring intuitive understanding.

In my testing, this method has proven intuitive and readily grasped by the vast majority of individuals I've engaged with. Only a small fraction of users typically assume they cannot return to the system setting.

This approach treats the system option as something distinct, which I believe is fitting since system differs fundamentally from light and dark. Additionally, it sidesteps the issues associated with too many displayed items or the added complexity of a drop-down menu. It feels like a reasonable middle ground that I eagerly anticipate becoming a native part of browser chrome in the future.