Dark Mode Toggles: Two States Are Enough
A CSS-Tricks article argues that two-state dark mode toggles are entirely sufficient, challenging the necessity of three-state options.
Stock photo for illustration only, not from the actual event
- Lea Verou argues that a two-state mode toggle is enough for users.
- Systems should fall back to OS settings with an easy override option.
- User preferences are then stored in localStorage for future sessions.
- Three-state controls are only necessary in very specific scenarios.
When it comes to web development, implementing dark mode toggles often leads to the assumption that visitors need three distinct state options: system, light, and dark. However, a recent blog post by Lea Verou featured on CSS-Tricks pushes back against this approach, arguing that a well-designed two-state control can actually express all three states seamlessly as long as users apply an override the first time it becomes relevant.
The core concept is straightforward: if there is no user preference, the website falls back to the system settings while providing a setting to override that preference if needed. Once chosen, that preference is securely stored in localStorage for all future sessions. The underlying philosophy champions simplicity, suggesting that reducing unnecessary user interface elements that accomplish the exact same task is generally a positive design choice.
Stock photo for illustration only, not from the actual event
The discussion also addresses what happens during complex toggling scenarios, such as starting with a light system preference, switching to dark, and then back to light. It questions whether this creates an undefined localStorage value or reverts to system settings. Ultimately, the article points out that theme switching is entirely tangential to the actual user goal for visiting a website in the first place, making minor state discrepancies negligible since a fix is just a single click away.
This debate over dark mode controls highlights an ongoing industry focus on minimalist UI design and reducing cognitive load for website visitors. While some developers argue that stripping away a dedicated third 'system' button feels too magical and strips away user control, the minimalist approach streamlines interactions and keeps interface clutter to an absolute minimum.
Despite the strong push for two states, Lea Verou acknowledges that there are indeed specific scenarios where three states still make sense. The debate has already swayed industry peers like @jakearchibald.com, who converted after reading the piece, while other developers like Vale have experimented with alternative UI approaches to present the three options using just two buttons.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment