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!

If you use absolute values once they are set, you can end up with a user being stuck in forced light / forced dark, without allowing them to switch back to system. Some users might like this behavior, as their OS is set to auto-switch between the two values depending on the time of the day.

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.