There was a fun little debate about color themes and UI/UX.
There is some solid logic to having three states for a color theme toggle:
- Light Mode
- Dark Mode
- System
Meaning:
- Be in Light Mode no matter what
- Be in Dark Mode no matter what
- Respect whatever the OS setting is
That’s what we have in the 2.0 editor.
Lea Verou presents a full-throated argument that color theme toggles should be two-state, not three-state.
- System
- Opposite of System
If you switch to the opposite, that hard-coded value is set and stays there, if you switch back, it goes back to respecting the system.
Bramus has been involved in a lot of color-theme thinking in the past few years and has a quibble with it where if you try out the control and fiddle with it back and forth, you might get locked into a setting that you don’t want. Lea re-quibbles with the idea that this scenario means a one-time fix.
I’m not quite sure where I land yet. I’m mostly persuaded by Lea’s thinking. But I also think I work on a site for web nerds, and I don’t think there is any confusion among web nerds about what a three-state toggle does, and they may appreciate seeing the underlying model.
Speaking of color!
- Ryan Trimble has a nice intro to
color-mix(). - This is a nice “ramp” color generator.
- The stories of the names of colors.
- Tinted grays.
- Worth knowing for your color pickers:
<input type="color" colorspace="display-p3" alpha>