Two vs. Three-State Color Theme Toggles

There was a fun and intellectual debate recently about UI controls for dark/light mode. I think the story starts with Modern Web Guidance skills from Google, which recommend using a two-state toggle, apparently written by Lea Verou, and Bramus Van Damme takes issue with it. Lea explained her thinking in detail, which is a great argument for UX. Bramus argues that there is a flaw with it for users who have auto-toggling color themes and argues that three-state is actually clearer. To which Lea now says, actually, you know what, maybe zero-states is the way to go (and links to lots of fun takes on the original).

Me, I agree with all the takes. Not all websites are the same, and different approaches may match different audiences, requirements, and available resources. This blog? It’s got zero-state switching (it changes only based on your system choice). CodePen? Three-state. Web devs appreciate seeing the implementation at work. If I worked at the New York Times? I’d consider the two-state approach. Or just go for 100% clarity.

Want to expand your CSS skills?

Leave a Reply

Your email address will not be published. Required fields are marked *

$966,000

Master.dev donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.