--- title: Dark mode toggles: two states are enough • Lea Verou description: Lea Verou argues that dark mode toggles should have only two states rather than three (Light, Dark, System). The core argument is that users only seek out... canonical: https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Dark mode toggles: two states are enough • Lea Verou | daily.dev og:description: Lea Verou argues that dark mode toggles should have only two states rather than three (Light, Dark, System). The core argument is that users only seek out... og:url: https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5 og:image: https://api.daily.dev/og/posts/aoJclwSb5.png og:image:alt: Dark mode toggles: two states are enough • Lea Verou og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Dark mode toggles: two states are enough • Lea Verou **[Lea Verou](https://daily.dev/sources/leaverou)** · 12 min read · 47 upvotes · 18 comments ## Summary Lea Verou argues that dark mode toggles should have only two states rather than three (Light, Dark, System). The core argument is that users only seek out theme toggles when something is wrong — not to preemptively express intent — making the 'System' state irrelevant at the moment of interaction. Tri-state toggles expose the underlying data model rather than aligning with actual user goals, adding cognitive load and UI friction for an extremely rare use case. A well-implemented two-state toggle can still represent all three underlying states: the first click overrides to the opposite of the current resolved value, and the second click removes the override and returns to system default. Common mistakes include storing a value that matches the system preference (silently pinning the theme) or removing overrides when the OS preference changes. Exceptions where tri-state controls are appropriate include dedicated settings panels and sites that implement meaningfully different color schemes depending on the OS setting. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community take How the wider developer community reacted, aggregated from 4 discussions and 17 comments across lobsters, hackernews (as of 2026-08-11). **TL;DR:** Commenters are broadly sympathetic to simplifying dark mode toggles but push back on hiding the 'system' state inside a two-click interaction, with several arguing that the system preference should simply be respected by default and no toggle is needed at all. **Sentiment:** 30% positive · 45% mixed · 25% skeptical **The case for** - A two-state toggle is simpler and reduces UI clutter on otherwise static pages. - Placing theme controls in a dedicated settings panel rather than on every page is a cleaner approach. - Respecting the system preference by default eliminates the need for a toggle entirely for most users. **The pushback** - Hiding the 'system' state behind a second click is itself unintuitive and arguably adds more cognitive load than an explicit three-state control. - Users who rely on time-based OS auto-switching (e.g., light at sunrise, dark at sunset) need a way to return to system default, which a two-state toggle makes difficult. - Storing a pinned value that matches the current system preference silently breaks the user's system-level automation. - Some users deliberately keep OS in dark mode but prefer light mode for specific apps, making per-site overrides genuinely useful. **By community** - lobsters (mixed): Discussion is lively and split — several commenters agree with simplification in principle but raise real edge cases around time-based OS themes, user intent inference, and the inscrutability of hiding a third state in a two-click pattern. - hackernews (mixed): Very thin thread; one commenter notes the system setting matters for time-based auto-switching, another simply agrees sites should follow system preference by default. **Hottest debate:** Whether hiding the 'system/reset' state inside a second toggle click is genuinely simpler or just trades an explicit option for an inscrutable hidden behavior. **Open questions** - Why haven't browsers implemented per-site color-scheme overrides natively, removing the need for sites to manage this at all? - How should a two-state toggle handle users whose OS automatically switches themes on a schedule? **Highlights** > Hiding the third state in an unintuitive behavior for a two state switch sounds to me like it has a much greater 'cognitive load' than a 3 state switch that makes the additional state explicit. This is made evident by all the otherwise technically savvy people who don't know that the author intends to preserve the third state in the two state switch! This really seems to me like the kind of thinking that drives smartphone ui design that makes things 'more simple' but incredibly inscrutable for outsiders. Ah, of course I have to swipe the nondescript line in the corner of the screen a certain direction to do what I want! At least the UX has less 'friction' now > — [kel on lobsters · 1 points](https://lobste.rs/s/nkoni1/dark_mode_toggles_two_states_are_enough#c_x8mglv) > Light and dark options with a system default is not enough. You have to let people return to the system setting. You'd be better off with no options, always using the system setting, and expecting people to do their momentary overriding there. In macOS I use the automatic setting, which flips at sunrise and sunset. Sometimes in the daytime I want dark mode anyway, but I still want it to _turn light again in the morning._ This is addressed! I use the one-click toggle in Control Center. It turns my windows dark until morning, because the underlying system setting is still set to automatic. If I had instead toggled a two-option web page to dark mode, I'd have changed it for good. And without a way to reset to use the system setting, I'd be stuck toggling it every 12 hours. I can get down with a photography lightbox or movie player that's always dark, but for a regular app or page, if you don't obey the environment, you broke my system's settings. Reinventing the wheel to override the system setting within a single tab of a browser window is just the wrong abstraction. > — [kevinc on lobsters · 1 points](https://lobste.rs/s/nkoni1/dark_mode_toggles_two_states_are_enough#c_tigs9c) > I agree that just two states are generally fine, but I find the behavior of toggling back to the system theme causing the state to fall back to `undefined` a bit odd (But I _love_ the interactive [demo page!](https://lea.verou.me/blog/2026/dark-mode-toggles/demo)). On [my website](https://isuffix.com), the toggle just stores whatever you last set and stays that way, and you have to clear `localStorage` to get back to following the system theme (or changing it each visit is just one click). I don't think it's about user confusion, but user intent. If a system switches from light to dark based on time of day, two-state toggles can't really express the difference between intending on following the system vs. staying on a specific theme. A user could desire either option, and it makes more sense to me that if they toggle the theme back, we should infer that their intent is to just stay on that theme. Inferring that their intent is to follow the system theme is both asymmetric and more complicated, making it a harder behavior to predict for the website to apply or for the user to intend. The blog is right that having a single click to switch themes is super easy, so it really isn't a big deal. But that does imply that when switching is more than a single click it's probably best to offer an option to follow the system theme instead of trying to infer the user's intent. > — [isuffix on lobsters · 1 points](https://lobste.rs/s/nkoni1/dark_mode_toggles_two_states_are_enough#c_qkt2hv) > I am even more radical than Lea Verou, my light/dark theme switcher has only one state: "Invert colours". If the browser default is to prefer light colour scheme it'll turn it dark, and vice-versa. Simples. It's probably very confusing for some people, but the implementation is just one clickable link. > — [mariusor on lobsters · 5 points](https://lobste.rs/s/nkoni1/dark_mode_toggles_two_states_are_enough#c_nyddkf) **Source threads** - [lobsters](https://lobste.rs/s/nkoni1/dark_mode_toggles_two_states_are_enough) · 9 points · 11 comments - [hackernews](https://news.ycombinator.com/item?id=49240065) · 5 points · 6 comments - [hackernews](https://news.ycombinator.com/item?id=49206992) · 2 points · 0 comments - [hackernews](https://news.ycombinator.com/item?id=49199360) · 1 points · 0 comments ## Community discussion Top comments from developers on daily.dev. **@cvltnguyen** · 7 upvotes > Handling a dark mode toggle as an "opposite of system" feels a little off, when the system can also be dynamic, ie, the macOS dark mode can be automatic **@dustysheldon** · 5 upvotes > Clarity issue. With a 2-state toggle, the user has no way of knowing if the setting will respect their system settings. The cognitive and interaction burdens of the 3-state toggle are not meaningfully higher than the proposed 2-state, but provide significantly more clarity. > > There **_could_** be a possible viable 2-state version, but it would have to also account for active/inactive as an override (e.g. change presentation if the setting is actively _overriding_ system behavior) — but this also creates a novel learning burden, as it doesn't follow the conventional standard they expect. **@sondreb** · 4 upvotes > I've had multiple instances where users requests "system", this is gotten more useful now that devices supports auto-change depending on time of day or light in the room. So 3 options is needed, to cover what users actually wants. **@markojr** · 4 upvotes > > ### People who disagree do not even understand checkboxes. > > > > Checkboxes come with Checked=true/false and indeterminate=true/false but render ultimately to 3 states > > same thing applies to dark mode toggles ... > > if the user opens a page for the first time then respect the system default and set it to whatever the user has selected .. if the user then switches to the other state just save whatever the user has selected > > there you have it .. dark theme toggle with just 2 states .. I don't know whats so hard to understand. > > > ### Hottake > > > > Designers who want a 3rd option do not understand... **@tripi\_wick** · 1 upvotes > No, I don’t really agree with this. I always keep the theme on system settings so it switches to a bright theme during the day and a dark theme at night. It just feels more natural to have a bright interface when it’s bright outside and a darker one when it’s dark. So I wouldn’t call system settings a waste. > > > Your Views ? 🤔 --- Tags: [#ux](https://daily.dev/tags/ux), [#ui-design](https://daily.dev/tags/ui-design) [View this post on daily.dev](https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Dark mode toggles: two states are enough • Lea Verou","url":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5"},"datePublished":"2026-08-06T11:44:30.416Z","dateModified":"2026-08-11T00:20:05.492Z","description":"Lea Verou argues that dark mode toggles should have only two states rather than three (Light, Dark, System). The core argument is that users only seek out...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/024f3e33c2a4bae7faffa2fbf58fdaf6?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/024f3e33c2a4bae7faffa2fbf58fdaf6?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Lea Verou","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Lea Verou","logo":"https://media.daily.dev/image/upload/s--bQJLItcm--/f_auto/v1716619918/logos/leaverou","url":"https://daily.dev/sources/leaverou"},"commentCount":18,"discussionUrl":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":47},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":18}],"keywords":"ux,ui-design","timeRequired":"PT12M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Lea Verou","item":"https://daily.dev/sources/leaverou"},{"@type":"ListItem","position":3,"name":"Dark mode toggles: two states are enough • Lea Verou"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5","comment":[{"@type":"Comment","text":"Handling a dark mode toggle as an “opposite of system” feels a little off, when the system can also be dynamic, ie, the macOS dark mode can be automatic","datePublished":"2026-08-06T12:37:50.627Z","url":"https://daily.dev/posts/aoJclwSb5#c-lYPCWXNX9","author":{"@type":"Person","name":"Thanh Nguyen","url":"https://daily.dev/cvltnguyen","image":"https://lh3.googleusercontent.com/a-/AOh14GgyVitUGtMOQNviv3HmiNJz0FQG4B13W0645hHT=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"Clarity issue. With a 2-state toggle, the user has no way of knowing if the setting will respect their system settings. The cognitive and interaction burdens of the 3-state toggle are not meaningfully higher than the proposed 2-state, but provide significantly more clarity.\nThere could be a possible viable 2-state version, but it would have to also account for active/inactive as an override (e.g. change presentation if the setting is actively overriding system behavior) — but this also creates a novel learning burden, as it doesn’t follow the conventional standard they expect.","datePublished":"2026-08-06T12:44:44.989Z","dateModified":"2026-08-10T15:53:14.523Z","url":"https://daily.dev/posts/aoJclwSb5#c-yo26RAFI3","author":{"@type":"Person","name":"Dusty Sheldon","url":"https://daily.dev/dustysheldon","image":"https://avatars.githubusercontent.com/u/30704778?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I’ve had multiple instances where users requests “system”, this is gotten more useful now that devices supports auto-change depending on time of day or light in the room. So 3 options is needed, to cover what users actually wants.","datePublished":"2026-08-07T20:40:21.702Z","url":"https://daily.dev/posts/aoJclwSb5#c-tPUPbw9H5","author":{"@type":"Person","name":"Sondre Bjellås","url":"https://daily.dev/sondreb","image":"https://lh3.googleusercontent.com/a/ACg8ocL-K1NiWHUxYTl2oFEugwo-Y-hjwHvWVjCS9S_FyrMEeWlmOTNI=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"People who disagree do not even understand checkboxes.\nCheckboxes come with Checked=true/false and indeterminate=true/false but render ultimately to 3 states\n\nsame thing applies to dark mode toggles …\nif the user opens a page for the first time then respect the system default and set it to whatever the user has selected … if the user then switches to the other state just save whatever the user has selected\nthere you have it … dark theme toggle with just 2 states … I don’t know whats so hard to understand.\n\nHottake\nDesigners who want a 3rd option do not understand design fundamentals and overcomplicate things which should be easy. People do not think of “System-Preferences” … they think of “Light/Dark” and want whatever they prefer preselected","datePublished":"2026-08-06T15:35:27.258Z","dateModified":"2026-08-06T15:36:13.111Z","url":"https://daily.dev/posts/aoJclwSb5#c-qYfgiRHMq","author":{"@type":"Person","name":"Marko Jozic-Reyes","url":"https://daily.dev/markojr","image":"https://media.daily.dev/image/upload/s--TvIfWcng--/f_auto/v1769558803/avatars/avatar_x9cfuU5ai02W3BPEbroGK?_a=BAMAMiiu0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"No, I don’t really agree with this. I always keep the theme on system settings so it switches to a bright theme during the day and a dark theme at night. It just feels more natural to have a bright interface when it’s bright outside and a darker one when it’s dark. So I wouldn’t call system settings a waste.\nYour Views ? 🤔","datePublished":"2026-08-11T06:00:22.524Z","dateModified":"2026-08-11T06:00:35.389Z","url":"https://daily.dev/posts/aoJclwSb5#c-3o0Q0ZzDa","author":{"@type":"Person","name":"Trishan Preet Singh","url":"https://daily.dev/tripi_wick","image":"https://lh3.googleusercontent.com/a/ACg8ocKD2Q28GJQC962XJvU16Y0CFwBdef4-H9P65XOZIm6oYtwL9p8=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```