Dark mode switcher seems broken

[christian-bromann]

It seems that the dark mode switcher is not displayed correctly. The sun and moon don't switch making the moon button useless, see:

[tbeseda]

Hi @christian-bromann thanks for the report. And the clicky gif! :)
Technically this is working as intended, but that doesn't matter if the intent isn't clear.

It's basically a 3-way toggle: force light mode ☀️, force dark mode 🌗, and "off" which uses system default -- in your case, the system theme is dark. so when you "disabled" the dark mode icon 🌙 it removes the local storage entry and the site uses your system's preferred theme.

Any ideas how this might be communicated better? It has come up 3 times (once on our team, 2 from other readers) but I imagine others are confused and don't report. No idea how to measure that.

One option is to remove the "off" mode altogether, but I personally like the control of setting something back to a sort of default. Maybe I should just get over it and we go with an interaction that's more common like found on Astro's docs:

[christian-bromann]

Ahh, yeah now that you mention it, it does make sense, however not on first sight. Maybe one solution could be:

• use system default by default (equivalent to "off")
• if system default is set to dark mode and user switches to light mode, save the settings into local storage so that page stays in light mode
• if system default is set to dark mode and user has previously switched to light mode (setting is set) and decides to switch back to dark mode, just remove the setting and continue with system default

Basically only store the mode if it differentiates from the system default. I think it could create the same UX without that confusion. Like there is no reason to store the dark mode preference if it is already the system default, at least I don't see a use case for it.

[kristoferjoseph]

I feel like this was an interesting idea but I have had multiple people tell me it is broken.
Seems like we should make it as people expect even though there is a subtlety lost.