---
title: "The Case for Tri-State Dark Mode Toggles"
url: https://daily.dev/posts/the-case-for-tri-state-dark-mode-toggles-qbdzvh0rx
source_url: https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles
type: article
source: "Bram.us"
published: 2026-08-18T08:29:07.185Z
updated: 2026-08-18T08:29:59.271Z
tags: ["css", "ux", "accessibility"]
reading_time: 8
upvotes: 0
comments: 1
language: 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: <https://www.bram.us/2026/08/18/the-case-for-tri-state-dark-mode-toggles>

## Questions this post answers

### Should a dark mode toggle on a website have two states or three states (system, light, dark)?

A three-state toggle (System, Light, Dark) is preferable to a two-state one. An informal poll of developers found 43 in favor of tri-state versus only 7 for two-state. Two-state controls that map one option back to 'system' can silently override a user's explicit choice when the OS auto-switches themes by time of day, causing unexpected behavior and confusing bug reports.

_daily.dev surfaces front-end UX debates like this for developers weighing toggle design choices._

### What UX problem occurs with a two-state dark mode toggle when the OS auto-switches between light and dark by time of day?

If a two-state toggle stores either 'system' or 'the computed opposite of system' instead of explicit values, a user who explicitly picks light during the day will see the theme flip to dark at night when the OS auto-switches, because the toggle actually mapped their choice to the system's opposite rather than persisting an explicit light preference.

_Developers debugging theme-toggle complaints can track UX patterns like this via 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

---

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)