---
title: "Chris’ Corner: Toggles & Color"
url: https://daily.dev/posts/chris-corner-toggles-color-xrvzy7lpj
source_url: https://blog.codepen.io/2026/08/17/chris-corner-toggles-color
type: article
source: "CodePen"
published: 2026-08-17T18:09:20.438Z
updated: 2026-08-18T08:29:59.283Z
tags: ["css", "ui-ux"]
reading_time: 2
upvotes: 4
comments: 0
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.

# Chris’ Corner: Toggles & Color

**[CodePen](https://daily.dev/sources/codepen)** · 2 min read · 4 upvotes · 0 comments

## Summary

A roundup discussing a debate over whether color theme toggles should have two states (System / Opposite of System) versus the common three-state approach (Light, Dark, System). Lea Verou argues for the two-state model, while Bramus raises a concern about users getting stuck in an unwanted state when toggling back and forth. The author remains undecided, noting that a three-state toggle may still make sense for a web-nerd audience since the underlying model is transparent to them. The post also links to several CSS color resources: an intro to color-mix(), a color ramp generator, a site on color name origins, a tinted-gray palette tool, and a WebKit blog post about Display P3 and alpha support in color input pickers.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://blog.codepen.io/2026/08/17/chris-corner-toggles-color>

## Questions this post answers

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

There are two competing schools of thought. The traditional approach uses three states: Light Mode, Dark Mode, and System (which respects the OS setting). Lea Verou argues for a two-state toggle instead: System and Opposite of System, where switching to the opposite hard-codes that value until you switch back to System. Bramus notes a downside: users fiddling with the two-state toggle can get stuck in an unwanted setting, which Lea considers a one-time, fixable edge case.

_daily.dev surfaces ongoing frontend debates like toggle design for developers refining their UI patterns._

### How do you support Display P3 colors with alpha transparency in an HTML color input picker?

WebKit added support for specifying a color space and alpha channel on the native color input, using the syntax input type="color" colorspace="display-p3" alpha. This lets developers offer users a wider gamut color picker with transparency support directly through the native HTML input element rather than building a custom picker.

_daily.dev helps developers track browser color-picker capabilities like this while building color tools._

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

[View this post on daily.dev](https://daily.dev/posts/chris-corner-toggles-color-xrvzy7lpj)