The Case for Tri-State Dark Mode Toggles

2 months ago by codeinabox to c/webdev

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.
JoyfulCodingGuy 8 points 2 months ago

A blog that advocates for the use of tri-state dark mode toggles ironically fails to implement this feature themselves. The article's default setting is a blindingly white background, contradicting its own argument.

Overall interesting read and I agree tri-state is nice but I couldn't get past this.

path: 0 25390116, hotness: undefined, score: 8, children: 4
refalo 3 points 2 months ago

Dark Reader master race

path: 0 25390116 25400702, hotness: undefined, score: 3, children: 3
JoyfulCodingGuy 1 point 2 months ago

While true, mobile Firefox has it but chromium browsers do not. They do have the force mode but it destroys some sites. So not ideal. ๐Ÿ™‚

path: 0 25390116 25400702 25429801, hotness: undefined, score: 1, children: 2
refalo 1 point 2 months ago path: 0 25390116 25400702 25429801 25432656, hotness: undefined, score: 1, children: 1
JoyfulCodingGuy 1 point 2 months ago

Yeah but I'm personally not going to use those browsers on mobile. FireFox, sometimes Brave, or just Vanadium on GrapheneOS. But good to know.

path: 0 25390116 25400702 25429801 25432656 25473744, hotness: undefined, score: 1, children: 0
cyclohexane 2 points 2 months ago

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.

path: 0 25400905, hotness: undefined, score: 2, children: 0
webdev
webdev

@programming.dev

login for more options
5884
902
336

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

  • Follow the programming.dev site rules
  • Keep content related to web development
  • If what you're posting relates to one of the related communities, crosspost it into there to help them grow
  • If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

go to feed...