<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk" -->

---
title: Dark mode toggles: two states are enough | daily.dev
description: A UI/UX design debate around dark mode toggles argues that a simple two-state light/dark control can express all three intents (light, dark, system) if the...
canonical: https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk
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 | daily.dev
og:description: A UI/UX design debate around dark mode toggles argues that a simple two-state light/dark control can express all three intents (light, dark, system) if the...
og:url: https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk
og:image: https://api.daily.dev/og/posts/P0IWHTdTk.png
og:image:alt: Dark mode toggles: two states are enough
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

**[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 3 min read · 39 upvotes · 8 comments

## Summary

A UI/UX design debate around dark mode toggles argues that a simple two-state light/dark control can express all three intents (light, dark, system) if the default falls back to system preference and an override is stored in localStorage for future visits. The piece endorses Lea Verou's stance that persistent, always-visible toggles should avoid a redundant System option since it adds cognitive load without real benefit, while noting two legitimate exceptions: settings-panel toggles and interfaces offering more than two color schemes.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://css-tricks.com/dark-mode-toggles-two-states-are-enough>

## Questions this post answers

### Do dark mode toggles need a light, dark, and system option, or is two enough?

Two states are typically enough. A well-designed two-state control can express all three outcomes by defaulting to the system color scheme preference and only introducing a stored override once the user actively toggles it, at which point the choice is saved in localStorage for future visits.

_Developers weighing UI simplicity against theme flexibility can find similar interface debates on daily.dev._

### When does a tri-state (light/dark/system) toggle actually make sense?

A three-state toggle is justified in two scenarios: when the color scheme control lives in a separate settings panel away from the primary interface, so it doesn't interfere with the visitor's main intent, or when more than two color schemes are offered and system settings map to different implementations depending on context.

_Anyone designing theme-switching UI can track nuanced design guidance like this via daily.dev._

## Community discussion

Top comments from developers on daily.dev.

**@mr\_guy** · 5 upvotes

> My browser is turned to 'force dark theme' plus I have dark mode extensions for an OLED look. So having any site readable is a gamble (my fault on that)

**@yaireo** · 5 upvotes

> I AWALYS select `System`. on my OS, software, websites, wherever. Cascading settings are best.

**@codexsavage6s** · 3 upvotes

> I won't say it's completely useless, in fact it's quite useful when you open a site at night or dark places and it doesn't hit you with light mode

**@spandanm110** · 1 upvotes

> System theme switching also now a default on the web for the modern websites.

**@michalfilo** · 0 upvotes

> I think it quite depends where you have these options. If it is pretty often opened app it makes sense  (and i use it), but I agree on this when we are talking about websites.

## 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
- [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
- [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

---

Tags: [#css](https://daily.dev/tags/css), [#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-p0iwhtdtk)

```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","url":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk"},"datePublished":"2026-08-17T14:16:49.929Z","dateModified":"2026-09-14T07:05:36.873Z","description":"A UI/UX design debate around dark mode toggles argues that a simple two-state light/dark control can express all three intents (light, dark, system) if the...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/lea-verou-color-scheme-scenarios.png","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/08/lea-verou-color-scheme-scenarios.png","isAccessibleForFree":true,"articleSection":"CSS-Tricks","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":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":8,"discussionUrl":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":39},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":8}],"keywords":"css,ui-design","timeRequired":"PT3M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Dark mode toggles: two states are enough"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk","comment":[{"@type":"Comment","text":"My browser is turned to ‘force dark theme’ plus I have dark mode extensions for an OLED look. So having any site readable is a gamble (my fault on that)","datePublished":"2026-08-18T00:24:08.455Z","url":"https://daily.dev/posts/P0IWHTdTk#c-HerU0KwcP","author":{"@type":"Person","name":"mr_guy","url":"https://daily.dev/mr_guy","image":"https://media.daily.dev/image/upload/s--kA2286Qs--/f_auto/v1717237879/avatars/avatar_Vmm9zE1OjqAn7kdD7jR0t"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I AWALYS select System. on my OS, software, websites, wherever. Cascading settings are best.","datePublished":"2026-08-17T17:34:38.515Z","url":"https://daily.dev/posts/P0IWHTdTk#c-iJTXxrUX8","author":{"@type":"Person","name":"Yair Even Or","url":"https://daily.dev/yaireo","image":"https://avatars.githubusercontent.com/u/845031?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":5}},{"@type":"Comment","text":"I won’t say it’s completely useless, in fact it’s quite useful when you open a site at night or dark places and it doesn’t hit you with light mode","datePublished":"2026-08-18T03:13:44.933Z","url":"https://daily.dev/posts/P0IWHTdTk#c-LK87M27Zv","author":{"@type":"Person","name":"Code X Savage","url":"https://daily.dev/codexsavage6s","image":"https://lh3.googleusercontent.com/a/ACg8ocK0nX9sL5dY7tHjUSK8NtYvb4oRSKm0HcLfnPih5DEiqeeSlg=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"System theme switching also now a default on the web for the modern websites.","datePublished":"2026-08-18T03:48:50.107Z","url":"https://daily.dev/posts/P0IWHTdTk#c-9Ejh7rtKu","author":{"@type":"Person","name":"Spandan Mukherjee","url":"https://daily.dev/spandanm110","image":"https://media.daily.dev/image/upload/s--DPiFEPJn--/f_auto/v1751080458/avatars/avatar_fAzMy3W2xsDzchHrtyLZZ?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}},{"@type":"Comment","text":"I think it quite depends where you have these options. If it is pretty often opened app it makes sense  (and i use it), but I agree on this when we are talking about websites.","datePublished":"2026-08-18T08:19:00.834Z","url":"https://daily.dev/posts/P0IWHTdTk#c-vbvAWc0uB","author":{"@type":"Person","name":"Michal Filo","url":"https://daily.dev/michalfilo","image":"https://lh3.googleusercontent.com/a/ACg8ocJw7RT2L5Tl9Qa2OnmI7uwXbrBSH2qT6cLpHU8fAuHxrbOUHA=s96-c"}}]}
{"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/dark-mode-toggles-two-states-are-enough-p0iwhtdtk#faq","mainEntity":[{"@type":"Question","name":"Do dark mode toggles need a light, dark, and system option, or is two enough?","acceptedAnswer":{"@type":"Answer","text":"Two states are typically enough. A well-designed two-state control can express all three outcomes by defaulting to the system color scheme preference and only introducing a stored override once the user actively toggles it, at which point the choice is saved in localStorage for future visits. Developers weighing UI simplicity against theme flexibility can find similar interface debates on daily.dev."}},{"@type":"Question","name":"When does a tri-state (light/dark/system) toggle actually make sense?","acceptedAnswer":{"@type":"Answer","text":"A three-state toggle is justified in two scenarios: when the color scheme control lives in a separate settings panel away from the primary interface, so it doesn't interfere with the visitor's main intent, or when more than two color schemes are offered and system settings map to different implementations depending on context. Anyone designing theme-switching UI can track nuanced design guidance like this via daily.dev."}}]}
```