--- title: The dark mode toggle fight nobody saw coming: two states... description: A debate is unfolding over whether dark mode toggles should have two states (light/dark, defaulting to system on first visit) or three (light/dark/system). Lea... canonical: https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The dark mode toggle fight nobody saw coming: two states or three | daily.dev og:description: A debate is unfolding over whether dark mode toggles should have two states (light/dark, defaulting to system on first visit) or three (light/dark/system). Lea... og:url: https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq og:image: https://api.daily.dev/og/posts/mApjKPwJQ.png og:image:alt: The dark mode toggle fight nobody saw coming: two states or three 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. # The dark mode toggle fight nobody saw coming: two states or three **[Trends](https://daily.dev/sources/trends)** · 2 min read · 75 upvotes · 18 comments ## Summary A debate is unfolding over whether dark mode toggles should have two states (light/dark, defaulting to system on first visit) or three (light/dark/system). Lea Verou argues two states suffice, backed by Chrome's Modern Web Guidance, since a third option adds cognitive load. Critics counter that two-state toggles can silently override an explicit user choice when the OS auto-switches themes by time of day, and can leave users stuck cycling between unwanted states. ## Content Somehow, in 2024, the internet is having a real argument about dark mode toggles. Not dark mode itself. The *toggle*. Specifically: should it have two states or three? Lea Verou, who works on web standards and clearly has opinions people listen to, says two is enough. Her logic: a persistent, always-visible toggle can flip between light and dark, defaulting to system preference on first visit and storing an override in localStorage after that. Adding a third "System" option, she argues, just adds cognitive load for no real payoff. Chrome's Modern Web Guidance backs this take. Not everyone's buying it. One designer ran an informal poll and got 43 votes for tri-state versus 7 for two-state, then followed up with a scenario that's hard to wave away: if a two-state toggle maps one of its values back to "system," and the OS auto-switches themes by time of day, you can end up silently overriding a choice the user explicitly made. Toggle to dark at night, OS flips to light in the morning, and suddenly your explicit dark-mode choice got interpreted as "just following system." That's not a UX nitpick, that's a toggle lying to the user about what it's doing. Bramus, writing in Chris' Corner, raises a related complaint: with two-state toggles, users can get stuck cycling between states they don't want, unable to get back to ## Questions this post answers ### should a dark mode toggle have two states or three states (light dark system) There is no consensus: some argue two states are sufficient, defaulting to system preference on first visit and storing a user override in localStorage afterward, since a third 'system' option adds cognitive load without real payoff. Others favor three explicit states because a two-state toggle can silently override an explicit choice if the OS auto-switches themes by time of day, making the toggle misrepresent what it's actually doing. _Weighing toggle UX tradeoffs like this is easier with real-world design debates surfaced on daily.dev._ ### what is the problem with a two-state dark mode toggle that maps to system preference A two-state toggle that maps one of its values back to 'system' can silently override a user's explicit choice: if someone toggles to dark mode at night and the operating system auto-switches to light in the morning, the toggle ends up following the system rather than honoring the user's deliberate selection, effectively lying about its own state. _Developers refining theme-switcher logic can track these UX edge cases via daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@byteoutlaw** · 9 upvotes > Choose either system or !system.. **@markojr** · 8 upvotes > in the case you are somebody who prefers this dynamic switch of dark/light mode then leaving the switch unchecked and respecting your system preferences is exactly what you want > If you toggle the switch to one state you say you are somebody who actually prefers one choice over the dynamic switching > > adding now a 3rd option just for the 47 Developers running on OSX while thinking this poll is somehow representativ is a joke at best > > here are some statistics to think about: > 90% of people don't give a fk about light/theme switch > of those 10% who actually care 90% stay always with the same... **@fabianletsch** · 5 upvotes > Why not add more options to maximize confusion? > > - Light > - Dark > - System > - Random > - Pick color > - Install theme > - Day/Night dependant > - Default (Obviously light mode) **@andradei** · 4 upvotes > So people like to fight over petty stuff? > > Add the buttons you want. THE END. **@spiderclam** · 4 upvotes > "Somehow, in 2024" what ## Similar posts on daily.dev - [Dark mode toggles: two states are enough • Lea Verou](https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-lea-verou-aojclwsb5) · Lea Verou · 47 upvotes · 18 comments - [Two vs. Three-State Color Theme Toggles – Master.dev Blog](https://daily.dev/posts/two-vs-three-state-color-theme-toggles-master-dev-blog-561lejywm) · Frontend Masters · 8 upvotes · 1 comments - [The best dark mode toggle is probably none • Lea Verou](https://daily.dev/posts/the-best-dark-mode-toggle-is-probably-none-lea-verou-b87kcu2hu) · Lea Verou · 104 upvotes · 33 comments --- Tags: [#webdev](https://daily.dev/tags/webdev), [#css](https://daily.dev/tags/css), [#ui-ux](https://daily.dev/tags/ui-ux) [View this post on daily.dev](https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq) ```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":"The dark mode toggle fight nobody saw coming: two states or three","url":"https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq"},"datePublished":"2026-08-18T08:29:35.736Z","dateModified":"2026-08-18T08:30:13.523Z","description":"A debate is unfolding over whether dark mode toggles should have two states (light/dark, defaulting to system on first visit) or three (light/dark/system). Lea...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1c561f6860f22d5492ff11cf99db9376?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/1c561f6860f22d5492ff11cf99db9376?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Trends","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":"Trends","logo":"https://media.daily.dev/image/upload/s--ZfSp3asX--/f_auto,q_auto/v1780996004/logos/trends?_a=BAMAMiWQ0","url":"https://daily.dev/sources/trends"},"commentCount":18,"discussionUrl":"https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":75},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":18}],"keywords":"webdev,css,ui-ux","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Trends","item":"https://daily.dev/sources/trends"},{"@type":"ListItem","position":3,"name":"The dark mode toggle fight nobody saw coming: two states or three"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq","comment":[{"@type":"Comment","text":"Choose either system or !system…","datePublished":"2026-08-18T09:18:56.069Z","url":"https://daily.dev/posts/mApjKPwJQ#c-osupY3zn4","author":{"@type":"Person","name":"Jacob B. Bonde","url":"https://daily.dev/byteoutlaw","image":"https://media.daily.dev/image/upload/s--veTChHK7--/f_auto/v1733220070/avatars/avatar_5cQvIZKr5tDFDotVDjulg"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":9}},{"@type":"Comment","text":"in the case you are somebody who prefers this dynamic switch of dark/light mode then leaving the switch unchecked and respecting your system preferences is exactly what you want\nIf you toggle the switch to one state you say you are somebody who actually prefers one choice over the dynamic switching\nadding now a 3rd option just for the 47 Developers running on OSX while thinking this poll is somehow representativ is a joke at best\nhere are some statistics to think about:\n90% of people don’t give a fk about light/theme switch\nof those 10% who actually care 90% stay always with the same option\nthe now remaining 1% actually needs this feature for 2 or 3 of their regular web-apps they are working with\n\nsource: trust me bro","datePublished":"2026-08-18T10:55:38.564Z","url":"https://daily.dev/posts/mApjKPwJQ#c-sti7MRzi4","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":8}},{"@type":"Comment","text":"Why not add more options to maximize confusion?\n\nLight\nDark\nSystem\nRandom\nPick color\nInstall theme\nDay/Night dependant\nDefault (Obviously light mode)","datePublished":"2026-08-19T06:47:38.392Z","dateModified":"2026-08-19T06:48:28.553Z","url":"https://daily.dev/posts/mApjKPwJQ#c-7PC3jgTqU","author":{"@type":"Person","name":"Fabian Letsch","url":"https://daily.dev/fabianletsch","image":"https://lh3.googleusercontent.com/a/ACg8ocKR6BVy_wn23EoOKq7-BlszlcXcLmASlnb7l-GtS-q1bePnkaJf=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"So people like to fight over petty stuff?\nAdd the buttons you want. THE END.","datePublished":"2026-08-18T14:56:14.408Z","url":"https://daily.dev/posts/mApjKPwJQ#c-pLensHO17","author":{"@type":"Person","name":"Isaac de Andrade","url":"https://daily.dev/andradei","image":"https://avatars.githubusercontent.com/u/2653546?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"“Somehow, in 2024” what","datePublished":"2026-08-18T12:58:10.329Z","url":"https://daily.dev/posts/mApjKPwJQ#c-lbm5a6OoV","author":{"@type":"Person","name":"Roberto Wesley Overdijk","url":"https://daily.dev/spiderclam","image":"https://avatars.githubusercontent.com/u/781745?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-dark-mode-toggle-fight-nobody-saw-coming-two-states-or-three-mapjkpwjq#faq","mainEntity":[{"@type":"Question","name":"should a dark mode toggle have two states or three states (light dark system)","acceptedAnswer":{"@type":"Answer","text":"There is no consensus: some argue two states are sufficient, defaulting to system preference on first visit and storing a user override in localStorage afterward, since a third 'system' option adds cognitive load without real payoff. Others favor three explicit states because a two-state toggle can silently override an explicit choice if the OS auto-switches themes by time of day, making the toggle misrepresent what it's actually doing. Weighing toggle UX tradeoffs like this is easier with real-world design debates surfaced on daily.dev."}},{"@type":"Question","name":"what is the problem with a two-state dark mode toggle that maps to system preference","acceptedAnswer":{"@type":"Answer","text":"A two-state toggle that maps one of its values back to 'system' can silently override a user's explicit choice: if someone toggles to dark mode at night and the operating system auto-switches to light in the morning, the toggle ends up following the system rather than honoring the user's deliberate selection, effectively lying about its own state. Developers refining theme-switcher logic can track these UX edge cases via daily.dev."}}]} ```