“Auto” has a label, while the others do not—likewise confusing
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
For #1, I suggest the “black & white cookie” (a.k.a. “contrast”) icon, as seen on gwern.net (this trio of “B&W cookie” / “sun” / “crescent moon” for “auto” / “light” / “dark” is becoming increasingly common for tri-state mode selectors, in my experience).
For #2, you should label all or none. My advice would be “all”, with a compromise: show labels on hover only (and make them a bit less obtrusive, and style them differently: smaller text, put the label off to the left—there’s room, given the shape of the logo—and perhaps set them in smallcaps? or even a different font, perhaps a sans; this would also solve problem #3).
The “auto” icon is the sun if auto says light mode, and the moon if it says dark mode. Though ideally it’d be self-explanatory.
A black-and-white cookie hanging above the pond doesn’t quite have the same charm as a sun or moon, I’m afraid. Therefore, unless UX substantially suffers from lack of a specialized icon, I’d prefer to keep the existing asset. I’m open to argument, though.
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
This is a good point. That interpretation would have never occurred to me! The simplest solution feels too busy:
Here’s what I’m currently leaning towards for addressing (2) and (3), ignoring potential issue (1) for now:
I found setting it in smallcaps to be quite distracting, so I settled for italics. What do you think?
Good; however:
“Auto” has the same icon as light—confusing!
“Auto” has a label, while the others do not—likewise confusing
The “Auto” label is styled just like the sidebar links, but of course it’s not a link at all (indeed, it’s not clickable or interactable in any way)
For #1, I suggest the “black & white cookie” (a.k.a. “contrast”) icon, as seen on gwern.net (this trio of “B&W cookie” / “sun” / “crescent moon” for “auto” / “light” / “dark” is becoming increasingly common for tri-state mode selectors, in my experience).
For #2, you should label all or none. My advice would be “all”, with a compromise: show labels on hover only (and make them a bit less obtrusive, and style them differently: smaller text, put the label off to the left—there’s room, given the shape of the logo—and perhaps set them in smallcaps? or even a different font, perhaps a sans; this would also solve problem #3).
The “auto” icon is the sun if auto says light mode, and the moon if it says dark mode. Though ideally it’d be self-explanatory.
A black-and-white cookie hanging above the pond doesn’t quite have the same charm as a sun or moon, I’m afraid. Therefore, unless UX substantially suffers from lack of a specialized icon, I’d prefer to keep the existing asset. I’m open to argument, though.
This is a good point. That interpretation would have never occurred to me! The simplest solution feels too busy:
Here’s what I’m currently leaning towards for addressing (2) and (3), ignoring potential issue (1) for now:
I found setting it in smallcaps to be quite distracting, so I settled for italics. What do you think?
Hmm, I see. Alright, that’s not too bad, given the labels.
Seems reasonable. (I agree that underlining the links is no good.)