|

Chris’ Corner: Toggles & Color

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>

    Source link

    Similar Posts