--- title: The Case for Tri-State Dark Mode Toggles | daily.dev description: An argument for using tri-state (System, Light, Dark) toggles rather than binary two-state switches when implementing Dark Mode controls on websites. The... canonical: https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: The Case for Tri-State Dark Mode Toggles | daily.dev og:description: An argument for using tri-state (System, Light, Dark) toggles rather than binary two-state switches when implementing Dark Mode controls on websites. The... og:url: https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx og:image: https://api.daily.dev/og/posts/QBDZVh0rX.png og:image:alt: The Case for Tri-State Dark Mode Toggles 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 Case for Tri-State Dark Mode Toggles **[Bram.us](https://daily.dev/sources/bram)** · 8 min read · 0 upvotes · 1 comments ## Summary An argument for using tri-state (System, Light, Dark) toggles rather than binary two-state switches when implementing Dark Mode controls on websites. The author, disagreeing with Chrome's Modern Web Guidance and web standards contributor Lea Verou, points to an informal social media poll (43 votes for tri-state vs 7 for two-state) and a concrete UX bug scenario: a two-state toggle that maps one value back to 'system' can silently flip a user's explicit choice when their OS auto-switches themes by time of day. The piece also covers ways to do two-state controls correctly (explicit labeling, persisting explicit values) and highlights an alternative UI pattern from another designer that shows two buttons but supports three underlying states. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Why is my two-state dark mode toggle showing the wrong theme after a user picks light mode during the day? A two-state toggle that stores only 'system' or 'the computed opposite of system' loses the user's explicit choice. If the OS auto-switches between light and dark by time of day, a user who picks light during the day will see dark again at night because the toggle silently mapped their choice back to the system value instead of persisting an explicit light preference. _Anyone debugging theme-toggle UX quirks can compare implementation approaches surfacing on daily.dev._ ### What are the alternatives to a plain light dark toggle for implementing website theme switching? Options include a tri-state control exposing System, Light, and Dark explicitly, a labeled two-state toggle marking the auto/system option clearly, a two-state toggle that writes explicit light or dark values plus a separate reset-to-system option, or a two-button UI where neither button is highlighted by default (representing system) and clicking a button sets and highlights an explicit choice, clicking it again reverts to system. _Developers weighing toggle UX trade-offs can find design pattern comparisons like this on daily.dev._ ## Community discussion Top comments from developers on daily.dev. **@agustinbarrientos** · 0 upvotes > I prefer a visible reset-to-system action because a two-state toggle can secretly represent three states ## 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 - [Trying out a Two-state Dark Mode Toggle—zachleat.com](https://daily.dev/posts/trying-out-a-two-state-dark-mode-toggle-zachleat-com-djhvmr6jc) · Zach Leatherman · 5 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 · 109 upvotes · 36 comments --- Tags: [#css](https://daily.dev/tags/css), [#ux](https://daily.dev/tags/ux), [#accessibility](https://daily.dev/tags/accessibility) [View this post on daily.dev](https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx) ```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 Case for Tri-State Dark Mode Toggles","url":"https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx"},"datePublished":"2026-08-18T08:29:07.185Z","dateModified":"2026-09-13T21:47:03.729Z","description":"An argument for using tri-state (System, Light, Dark) toggles rather than binary two-state switches when implementing Dark Mode controls on websites. The...","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":"Bram.us","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":"Bram.us","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/3db2116954be44df873ec24cf0e03d14","url":"https://daily.dev/sources/bram"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"css,ux,accessibility","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Bram.us","item":"https://daily.dev/sources/bram"},{"@type":"ListItem","position":3,"name":"The Case for Tri-State Dark Mode Toggles"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx","comment":[{"@type":"Comment","text":"I prefer a visible reset-to-system action because a two-state toggle can secretly represent three states","datePublished":"2026-08-18T22:03:03.641Z","url":"https://daily.dev/posts/QBDZVh0rX#c-m1JN0szyv","author":{"@type":"Person","name":"Agustin Barrientos","url":"https://daily.dev/agustinbarrientos","image":"https://media.daily.dev/image/upload/s--5ayxQnqn--/f_auto/v1788281802/avatars/avatar_wQYYVe5Tbj0NJ7C7qPoa8?_a=BAMAMicg0"}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx#faq","mainEntity":[{"@type":"Question","name":"Why is my two-state dark mode toggle showing the wrong theme after a user picks light mode during the day?","acceptedAnswer":{"@type":"Answer","text":"A two-state toggle that stores only 'system' or 'the computed opposite of system' loses the user's explicit choice. If the OS auto-switches between light and dark by time of day, a user who picks light during the day will see dark again at night because the toggle silently mapped their choice back to the system value instead of persisting an explicit light preference. Anyone debugging theme-toggle UX quirks can compare implementation approaches surfacing on daily.dev."}},{"@type":"Question","name":"What are the alternatives to a plain light dark toggle for implementing website theme switching?","acceptedAnswer":{"@type":"Answer","text":"Options include a tri-state control exposing System, Light, and Dark explicitly, a labeled two-state toggle marking the auto/system option clearly, a two-state toggle that writes explicit light or dark values plus a separate reset-to-system option, or a two-button UI where neither button is highlighted by default (representing system) and clicking a button sets and highlights an explicit choice, clicking it again reverts to system. Developers weighing toggle UX trade-offs can find design pattern comparisons like this on daily.dev."}}]} ```