Post

QQ about Dark Mode Toggles on websites How many options do you show to users? - Three values: System, Light, or Dark - Two values: Light, Dark (with one of them mapping to “System” behind the scenes). Why the one or the other? (I have an opinion about it, but I’m looking for external input)

I kinda like having only two, system being the default and switching to a preferred one after the first interaction. One click instead of two. The disadvantage is that you need to clear your state if you want to refer back to the system.

Steps: - get user preference through media query, store in state - listen to color scheme changes, update state - if user toggles, update state AND set localStorage - don't listen to color scheme changes if user has manually toggled - on reload, prefer localStorage over media query

The debate is whether the simpler UX is worth the fact that resetting the state is more difficult. I feel like as developers, we tend to care a lot, but I am not sure this is a big deal for most users.

This is the same approach I use and I feel similarly!

I think the likelihood that you will have a user who does all of:

1. Cares about light/dark mode 2. Sets their system setting to change throughout the day 3. Manually sets a specific website different from their system settings 4. Wants to reset that website's settings back to their system settings Is a small enough group of users to ignore

They can still manually toggle the modes when they want to change them

Also, if you magically map one option to `system` and the other to either light/dark, you can end up in situations where a user switched back to “light” but the value `system` getting stored. If they then visit later during the day, they might see dark although they they set it to light earlier.