In a move that has resonated deeply within the web development and user experience (UX) communities, renowned front-end developer and web standards expert Lea Verou recently published a thought-provoking analysis challenging the prevalent implementation of dark mode toggles on websites. Her critique, detailed in an August 2026 blog post titled "Dark Mode Toggles: Why Three States Are Usually Two Too Many," argues for a more intuitive, two-state control mechanism, asserting that many current three-state implementations introduce unnecessary complexity and cognitive load for users. This discussion, initially sparked by her observations on common UI patterns, has since evolved into a comprehensive examination of user preferences, system defaults, and the fundamental principles of good interface design.
The Proliferation of Dark Mode and Evolving User Preferences
The widespread adoption of dark mode across operating systems, applications, and websites has been one of the most significant shifts in digital interface design over the past decade. Initially gaining traction in specialized applications for developers and designers, dark mode quickly became a mainstream feature, celebrated for its potential benefits including reduced eye strain in low-light environments, improved battery life on OLED screens, and aesthetic appeal. Operating systems like Apple’s macOS and iOS, Google’s Android, and Microsoft’s Windows introduced system-wide dark mode preferences, allowing users to dictate their preferred visual theme across their entire digital ecosystem.
This system-level preference is communicated to web browsers via the prefers-color-scheme CSS media query, enabling websites to automatically adapt their appearance to match the user’s operating system setting. While this mechanism provides a seamless default experience, many websites also offer explicit toggles for users to override their system preference, leading to the various implementation patterns Verou critiques. The intention behind these toggles is often to grant users maximum control, yet Verou’s argument suggests that in striving for comprehensive control, designers may inadvertently be overcomplicating a straightforward user interaction.
Lea Verou’s Core Argument: The Case for a Two-State Control
Verou’s central thesis targets the common practice of presenting users with three distinct options for theme selection: "Light," "Dark," and "System" (or "Auto"). She contends that a well-designed two-state control can effectively encompass all three scenarios, simplifying the user interface without sacrificing functionality. The essence of her proposal is elegant: websites should, by default, respect the user’s operating system preference. If a user wishes to override this default—for instance, preferring a light theme even when their OS is set to dark, or vice versa—they would simply select "Light" or "Dark." This selection would then be stored locally (e.g., using localStorage), persisting their choice across sessions and overriding the system default until changed again.
"Why show a System option at all," Verou questions, "when a good two-state control can actually express all three states – users just need to apply the override the first time it becomes relevant." This approach hinges on the principle of "least astonishment," where the system behaves as the user would intuitively expect unless explicitly instructed otherwise. By defaulting to the system preference, the website aligns with the user’s broader digital environment, only requiring an interaction when a deviation from that preference is desired.
Her argument is powerfully illustrated by a visual diagram, which outlines various scenarios of system preference and user overrides, consistently demonstrating how a simple Light/Dark toggle can manage all outcomes. If a user has no stored preference, the site defers to prefers-color-scheme. If they explicitly choose "Dark," that choice is stored. If they then choose "Light," that preference is stored. The "System" state is implicitly handled by the absence of an explicit override.
Cognitive Load and User Intent: Beyond Simplicity
Verou’s advocacy for fewer UI elements extends beyond mere aesthetic simplicity; it delves into fundamental principles of human-computer interaction, particularly regarding cognitive load and user intent. When users visit a website, their primary goal is typically to consume content, complete a task, or find information. Interacting with a theme toggle, while sometimes necessary, is almost always secondary to this primary intent.
Presenting three options – Light, Dark, System – forces users to pause, process the distinctions between these choices, and make a decision that might not immediately impact their primary goal. This added mental effort, however minor, contributes to cognitive load. In contrast, a two-state toggle (e.g., simply showing "Light" when in dark mode, and "Dark" when in light mode, allowing a switch) minimizes this friction. The user’s interaction becomes a straightforward binary choice: "Do I want to switch from the current theme?"
Verou emphasizes that the theme control is "entirely tangential to the actual user goal for visiting the website." Even if a user’s intent is to "pin" a light theme when their OS is set to dark, they would only become aware of the divergence when their OS switches, for instance, from light to dark at sunset. At that moment, a single click on a clear two-state toggle is all that’s required to correct it. The ease of this correction, she argues, negates the need for a persistent, more complex three-state control.
This simplification is particularly relevant for persistent UI elements, such as toggles embedded in a site’s header or navigation. These elements are always visible, constantly demanding a sliver of the user’s attention. Minimizing the complexity of such ubiquitous controls helps users focus on the core content and functionality, improving overall user satisfaction and efficiency.
Technical Underpinnings: prefers-color-scheme and localStorage
The technical feasibility of Verou’s proposed two-state system relies on two key web technologies: the prefers-color-scheme media query and localStorage.
The prefers-color-scheme media query allows developers to detect whether the user has requested a "light" or "dark" color scheme in their operating system settings. This is implemented in CSS, enabling websites to apply different styles based on the user’s preference without any JavaScript. For example:
/* Default light theme */
body
background-color: white;
color: black;
/* Dark theme applied if OS preference is dark */
@media (prefers-color-scheme: dark)
body
background-color: #333;
color: white;
This ensures that the website automatically matches the system preference by default, providing a harmonious experience from the first load.
localStorage, on the other hand, is a client-side storage mechanism that allows web applications to store data in the browser with no expiration date. This is crucial for persisting a user’s explicit theme choice. When a user clicks a "Dark" button, for example, JavaScript can store theme: 'dark' in localStorage. On subsequent visits, the website’s JavaScript can check localStorage first. If a preference is found there, it overrides the prefers-color-scheme setting, ensuring the user’s explicit choice is respected. If no preference is found in localStorage, the site gracefully falls back to the system preference.
This combination allows for a robust and user-friendly system where the default is smart, and overrides are easily managed and remembered.
Community Reactions and Broader Discussions
Verou’s insights have been met with significant agreement and further discussion within the web development community. Many developers and designers have acknowledged the subtle but impactful difference that simpler UI can make. The article itself cited a compelling argument from Chris Coleman, who voiced a common sentiment: "All I ever wanted was for my OS to be dark, not every website I look at. It was a huge leap by the browser vendors to tie all web content to that system preference." Coleman’s comment underscores a broader desire among users for system-wide consistency and highlights a potential area for improvement in how browsers manage web content preferences.
This perspective suggests that the ideal solution might ultimately lie at the browser level. If browsers offered a more granular, built-in setting for "always dark mode on websites" or "always light mode on websites," independent of the OS setting, then the need for site-specific toggles—whether two-state or three-state—would diminish significantly. Such a browser-level control would provide a single, centralized point for users to manage their web browsing aesthetic, further reducing the cognitive burden of configuring each site individually.
Verou later published a follow-up piece, "Dark Mode Toggles, Part 2," summarizing the extensive discussion her initial post generated. This follow-up reiterated and reinforced her original stance, emphasizing that her guidance is specifically for persistent toggles, such as those found in main navigation bars. For these omnipresent elements, the two-state pattern is optimal. However, she also conceded that the ultimate, most user-friendly solution might be to have no toggle at all, letting the system default (or a future browser-level override) manage the theme entirely.
When Three States Are Appropriate: Defined Scenarios
Despite her strong advocacy for two-state controls, Verou acknowledges that there are specific, limited scenarios where a three-state toggle (Light, Dark, System) might indeed be appropriate. These exceptions are critical for a nuanced understanding of UX principles and include:
-
When the UI is not persistent: If the theme selection control is located in a dedicated settings page, accessed infrequently, or part of an initial setup wizard, the added complexity of a three-state choice is less impactful. In these contexts, users are already in a "configuration" mindset, and a more comprehensive set of options is expected and often appreciated. The cognitive load is acceptable because it’s not a constant presence during primary user tasks.
-
When the user’s primary goal is to configure their theme: For applications or websites where theme customization is a core feature (e.g., code editors, design tools, or highly customizable social media interfaces), providing explicit control over "System" alongside "Light" and "Dark" can be valuable. In such cases, the user’s intent is to meticulously configure their environment, and the three-state option offers a clear distinction between an explicit choice and a dynamic system-driven one.
These exceptions highlight that UI/UX design is rarely a one-size-fits-all endeavor. Context, user intent, and the prominence of the control all play crucial roles in determining the most effective design pattern.
Implications for Web Development and User Experience
Lea Verou’s detailed analysis carries several significant implications for the future of web development and user experience:
- Prioritizing User Clarity: It serves as a potent reminder for developers and designers to constantly question existing UI patterns and prioritize clarity and simplicity for the end-user. Every additional option, however well-intentioned, adds a layer of cognitive processing.
- Reducing Development Overhead: By advocating for a simpler control, Verou’s approach also potentially streamlines development efforts. A two-state toggle, coupled with intelligent use of
prefers-color-schemeandlocalStorage, can be more straightforward to implement and maintain than a complex three-state system that needs to manage an explicit "System" state. - Enhancing Accessibility and Inclusivity: A simpler, more predictable interface is inherently more accessible. Users with cognitive disabilities, or those who are simply navigating quickly, benefit from clear, unambiguous choices. By respecting system defaults, sites also cater to users who rely on OS-level accessibility features to manage their visual preferences.
- Shaping Browser Evolution: The discussion around browser-level theme control, as advocated by Chris Coleman and implicitly supported by Verou’s critique of site-specific toggles, could influence future browser development. As user preferences become more sophisticated, browsers may evolve to offer more centralized and powerful controls over how web content is displayed, potentially reducing the need for developers to implement these features on a site-by-site basis.
In conclusion, Lea Verou’s critique of three-state dark mode toggles is more than a technical nitpick; it’s a fundamental discussion about the philosophy of user interface design. By advocating for a minimalist, two-state approach that intelligently leverages system defaults and user overrides, she champions a web that is more intuitive, less cluttered, and ultimately, more respectful of the user’s primary intent. Her insights provide a clear directive for developers: less UI that accomplishes the same, or even more, is generally a superior design choice, particularly when it comes to tangential user controls. The ongoing dialogue reinforces the dynamic nature of web standards and the continuous pursuit of optimal user experiences.
