Rethinking Dark Mode Toggles: Lea Verou Advocates for Streamlined UI and System-Level Control

A significant discussion is underway in the web development and user experience (UX) communities, sparked by prominent web standards expert Lea Verou, regarding the prevalent implementation of light/dark mode toggles on websites. Verou critically evaluates the common practice of presenting users with a three-state option – Light, Dark, and System – arguing for a more intuitive and streamlined two-state control or, ideally, no persistent toggle at all, relying instead on system-level preferences. Her detailed analysis, published in August 2026, posits that simpler UI can effectively manage user preferences while significantly reducing cognitive load.

The core of Verou’s argument challenges the necessity of explicitly offering a "System" option when a well-designed two-state toggle (Light/Dark) can implicitly handle system preferences. According to her, users only need to override their system’s default preference once if they desire a different scheme, and this choice can then be stored locally for future visits. This approach aligns with broader UX principles that advocate for minimalism and reducing unnecessary choices for the user.

The Evolution of Dark Mode and User Preference

The adoption of dark mode across operating systems and applications has been one of the most significant UI/UX trends of the past decade. Beginning in the mid-2010s, with Apple introducing a system-wide dark mode in macOS Mojave in 2018 and iOS 13 in 2019, followed by Android 10, the functionality quickly became a standard expectation. Users gravitated towards dark mode for a variety of reasons:

• Reduced Eye Strain: Especially in low-light environments, dark themes can lessen the strain on eyes, making prolonged screen use more comfortable.
• Battery Efficiency: For devices with OLED screens, dark pixels consume less power than light pixels, potentially extending battery life.
• Aesthetic Preference: Many users simply prefer the modern, sleek look of a dark interface.
• Accessibility: Dark mode can also aid users with certain visual impairments, such as photophobia.

In response to this growing demand, web developers integrated the prefers-color-scheme media query, a CSS feature that allows websites to automatically adapt their appearance based on the user’s operating system settings. This innovation largely eliminated the need for manual selection for many users, pushing the industry towards a more harmonious user experience across devices and the web. However, the implementation of manual overrides varied widely, leading to the current debate.

Lea Verou’s Critique: Simplifying the Toggle

Verou’s central thesis, articulated in her 2026 blog post, focuses on the redundancy of the "System" option in many light/dark mode implementations. She illustrates how a "good two-state control" – typically a toggle or a button that switches between "Light" and "Dark" – can implicitly manage the "System" state. The logic is elegant in its simplicity:

1. Initial State: When a user first visits a site, if no explicit preference is stored, the site defaults to the user’s operating system preference (detected via prefers-color-scheme). This is the implicit "System" state.
2. User Override: If the user then clicks the toggle, say from a system-default "Light" to "Dark," this preference is stored (e.g., in localStorage). This stored preference overrides the system setting on subsequent visits.
3. Reverting to System (Implicitly): If the user later switches back to "Light" (or "Dark" if their system preference changes), the stored preference is updated. The critical insight here is that the user doesn’t need to explicitly select "System" because the absence of an override is the system preference. If their OS switches from light to dark, and they haven’t set an override, the website will simply follow suit. If they had set an override, they can change it with a single click.

This method significantly reduces the visual clutter and decision fatigue associated with three-option menus. Verou emphasizes that "less UI that accomplishes the same as more UI is generally a good thing," extending her argument beyond mere simplicity to fundamental principles of user-centric design. The objective is to make the interaction as effortless and intuitive as possible, minimizing the steps and cognitive effort required from the user for a secondary function like theme switching.

Cognitive Load and User Intent

A crucial aspect of Verou’s argument revolves around cognitive load. In UX design, cognitive load refers to the total amount of mental effort being used in the working memory. Too many options or complex interfaces can increase cognitive load, making an application or website harder to use and less enjoyable. Persistent UI elements, such as theme toggles often found in site headers or navigation, continuously draw the user’s attention, even if subconsciously.

Verou highlights that theme switching is "entirely tangential to the actual user goal for visiting the website." Users typically visit a site to consume content, complete a task, or find information. The color scheme, while important for comfort and aesthetics, is a secondary concern. Presenting a three-state choice for such a tangential function can introduce unnecessary friction. Even if a user’s intent were to "pin" light mode rather than revert to a dynamic "System (light)" mode, this would only become relevant if their OS preference diverged (e.g., OS switches to dark). At that point, a single click would suffice to correct it. The minimal impact of such a scenario further supports the case for simplification.

The Radical Proposal: No Toggle At All?

Taking the simplification argument a step further, the discussion stirred by Verou’s post also brought forth a more radical proposition: perhaps no persistent toggle is needed at all. Chris Coleman, an industry voice, articulated this 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. Anyway, I think the light/dark preference should be in the browser, and what you propose seems perfectly in line with that."

This perspective suggests that the ideal solution might be for browsers to offer a universal, application-wide setting for color schemes, similar to how they manage zoom levels or content blockers. If users could set their default preference directly within their browser (e.g., "Always Dark," "Always Light," "Follow System"), websites could simply respect that preference without needing to provide their own toggles. This would offload the responsibility from individual websites and provide a consistent experience across the entire web, reducing development overhead and ensuring a truly unified user preference. While this vision requires significant browser-level development and standardization, it represents the ultimate expression of system-level control and user-centric design.

When Three States Are Appropriate: Niche Exceptions

While advocating for simplicity, Verou acknowledges that there are specific, niche scenarios where a three-state control might be justified. These exceptions typically involve situations where the color scheme plays a more integral role in the application’s functionality or user workflow, rather than being a purely aesthetic preference for a content website. Examples might include:

1. Specialized Tools or Dashboards: Applications where users frequently switch between viewing data in different contexts (e.g., a data visualization tool where certain color schemes highlight specific data points, or a developer IDE where theme affects code readability across various languages). In such cases, granular control over the theme, including the option to always follow the system or always override it, might be genuinely beneficial.
2. User-Generated Content Platforms with Complex Theming: Platforms that allow users extensive customization of their own profiles or content presentation, where a "system" option might be one of several complex theme choices.
3. Accessibility Overrides in Highly Specific Contexts: For users with very particular accessibility needs that go beyond typical light/dark mode adjustments, where a nuanced override might be essential for usability.

However, Verou stresses that these are exceptions, not the rule. For the vast majority of consumer-facing websites and general applications, the simpler two-state model is superior.

Technical Underpinnings and Implementation Details

Implementing Verou’s proposed two-state model relies on a combination of web technologies:

• prefers-color-scheme Media Query: This CSS media feature detects the user’s OS preference. If the OS is set to dark, prefers-color-scheme: dark will be true, and vice-versa for light. This forms the basis of the implicit "System" setting.
• JavaScript and localStorage: When a user explicitly toggles the theme, JavaScript code is used to store this preference (e.g., "dark" or "light") in localStorage. This client-side storage persists across browser sessions.
• CSS Custom Properties (CSS Variables): These are often used to define color palettes, making it easy to switch between light and dark themes by simply changing a few variable values, triggered by JavaScript or media queries.

The workflow would be:

1. On page load, check localStorage for a user-set preference.
2. If a preference exists, apply it and override the prefers-color-scheme setting.
3. If no preference exists, apply the theme dictated by prefers-color-scheme.
4. When the user clicks the toggle, update localStorage with the new preference and apply the corresponding theme.

This technical approach is robust and widely supported across modern browsers, making the implementation of a streamlined two-state toggle both feasible and efficient.

Industry Reactions and Broader Implications

Lea Verou’s insights have resonated strongly within the web development, UX design, and product management communities. The discussion highlights an ongoing tension between providing users with control and simplifying their experience. Many developers and designers have welcomed her arguments as a much-needed push towards thoughtful, user-centric design.

The implications of this discussion are multifaceted:

• Improved User Experience: By reducing cognitive load and unnecessary UI, websites can become more intuitive and pleasant to use, especially for those who primarily use sites for content consumption.
• Best Practice Evolution: Verou’s work may influence future best practices and guidelines for implementing dark mode, potentially leading to a more standardized and streamlined approach across the web.
• Accessibility Considerations: While simplification is often beneficial for accessibility, designers must ensure that any streamlining does not inadvertently remove critical options for users with specific needs. However, the proposed model still allows for user overrides, which is key.
• Developer Efficiency: A clearer, more concise pattern for theme toggles could simplify development efforts, reducing the time spent on complex UI logic for what should be a secondary feature.
• Push for Browser-Level Control: The debate further strengthens the argument for browsers to offer more granular, universal control over user preferences, which could ultimately lead to a more consistent and less fragmented web experience.

The conversation sparked by Lea Verou serves as a potent reminder that even seemingly minor UI elements warrant meticulous attention to detail. In a digital landscape increasingly saturated with options and settings, the move towards intelligent defaults, implicit controls, and a focus on core user intent represents a critical step forward in crafting more enjoyable and efficient web experiences. Her guidance, particularly for persistent toggles in main navigation, strongly advocates for the two-state pattern, with the ultimate aspiration perhaps being no toggle at all, letting the system default truly shine.