Infra: Make the color scheme toggle into a three-state cycler #2552
Conversation
Yes, it seems a good idea. A |
hugovk
changed the title
OK, then I’ll change the logic so we can reset the label in a function passed to /edit: done |
|
Only checked functionality so far, but looking good! https://pep-previews--2552.org.readthedocs.build/ There's a bit of oddness when hovering the mouse over the icon. Depending on which pixel it's hovering over, it'll either show the current state (.e.g "Light mode") or the icon action ("Switch to dark mode"). With Furo I only see the current state. |
|
Ah I see, because the SVG has a |
flying-sheep
changed the title
There was a problem hiding this comment.
Thanks!
I tested the rendered preview through the different states, and on desktop and mobile, and everything appeared to look good and work as intended.
There was one noticeable UI/UX issue though—despite the button icon showing the current state, the tooltip shows the next state, which is confusing and does not match Furo's behavior, as @hugovk pointed out. IMO, it would make more sense for the tooltip to show the current state, to match the icon.
Co-authored-by: CAM Gerlach <[email protected]>
|
Fixed! Now the tooltips are very explicit. |
Co-authored-by: Adam Turner <[email protected]>
|
I'll merge this now as it does fix a real issue -- if further issues arise we can fix them in follow-ups. Thanks! A |
It recognizes user's prefer-color-scheme system setting and remembers user's choice. Also it loads user's choice earlier so there won't be a flash change of colors at start. The implementation is largely based on python/peps#2552 (MIT license), whose source code locate at https://github.com/python/peps/tree/f1af4a7c886cb9fb4bbb536923cccfd3b555a2ab/pep_sphinx_extensions/pep_theme
Rendered
Fixes #2539. As described there, the only way to model the three states (manual light mode, manual dark mode, auto mode) is by having a tri-state UI. Nobody there had a problem with Furo’s behavior as that one guarantees visible theme changes on the first two clicks, and only has the third click change only the button (
light→auto (light system theme)anddark→auto (dark system theme))I made it so the tooltip and aria label on the button tells people what a click will do. The only issue I see in my implementation is related to that: the tooltip/aria-label is incorrect once the system theme changes while the site is open. I can refactor everything so that can be easily fixed, but I first wanted to know if titles like this are welcome.