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.
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.