Ternary button for theme/color mode is an anti-pattern

[gabalafou]

There was a discussion about the light/dark/auto button, and there was general support to make it more like the one in the MDN docs.

[smeragoel]

I feel that there are two slightly separate discussions here, this is how I interpreted it:

• The original issue was that the Auto option in the theme switcher is not necessary because of a bug that set auto==light theme for the user all the time, so they wanted to remove the auto option.
• Your suggestion to switch from a ternary button to a dropdown - it'll still have the auto option, but just might make it easier for folks to customise what themes they want.

I think switching to a dropdown is an excellent idea. I don't pay much attention to the icons, and just click the button rapidly until I get the desired theme, often cycling multiple times so I'd personally also prefer the dropdown.

From a UX perspective, a dropdown will:

• Give better control over switching the themes
• Allow us to explicitly write the theme names so that we don't have to rely on icons (which are not universal)
• Allowing people to add more themes!

I did a quick mockup of this on Figma, however, this is not a new design and is reusing the dropdown component we already use in the theme, along with options that have icons next to them.

[timhoffm]

Please make sure this uses as little space as possible. Space in the navigation bar is limited. While I find a dark/light mode setting useful I don’t want to waste more space than necessary on it.

[gabalafou]

Thanks @timhoffm, that's good feedback. I'm not opposed to having it be an icon dropdown, meaning that in the navbar it remains an icon the same size as before. When clicked, it opens up a dropdown menu like the one in @smeragoel's Figma. Then when the user chooses an option from the menu, the menu closes and the icon in the navbar is updated to reflect the option that the user chose.