Adding a Dark Mode toggle to your website is a nice touch that many users appreciate. When implementing one, the default instinct for many developers is to reach for a simple binary switch: Light on one side, Dark on the other.
While a two-state control might seem like the most straightforward solution, I firmly believe it’s flawed from a user experience perspective. Instead, we should all be using tri-state controls. Let me explain why.
Unpopular opinion: I don’t think this is worth the screen real estate it takes up, even if small. It’s just too specific of a feature that does not inherently need changing on the fly.
You should configure your light / dark mode preferences in your OS and browser, and sites can just pick them up from there. Changing them on the fly is unnecessary.
And for websites, you should probably just use those dark mode extensions anyways if that’s your preference. Even if a site doesn’t support it, you’ll get most of the way there.