Repository navigation
[UI Improvement] Move Theme Toggle Outside the Mobile Navigation Menu #486
Description
Description
Currently, on mobile, users have to open the hamburger menu to access the theme selector.
We can improve this by placing a theme toggle icon directly in the navbar, next to the search icon, so users can switch between Dark and Light themes without opening the navigation menu.
Expected Behavior
- Move the theme toggle outside the hamburger menu.
- Place it next to the search icon.
- Switch between Dark and Light themes with a single click.
This would make theme switching more accessible and provide a cleaner, more consistent mobile experience.
Earlier (We have to open menu and scroll to the bottom to change theme)
Expected
Activity
anurag2787 commentedon Oct 30, 2026
Hi @anurag629 this is small UI improvement i think we can do what do you think about it? if it makes sense can I work on it?
anurag629 commentedon Oct 30, 2026
Makes sense on a phone, and it's yours, @anurag2787. Starlight puts the theme control in the header's right group, which it hides below 50rem, so on mobile it's only in the menu footer. Two ways to do it:
Headerthe same way feat(website): replace theme dropdown with toggle button #484 overrodeThemeSelect, rendering Starlight's default header and adding yourThemeTogglenext to the search button on small screens.Then take it out of
MobileMenuFooter(another override), so it isn't in two places. Check that the header doesn't overflow at 320px wide, that the button is at least 44px to tap, and that the desktop layout is unchanged. Add before and after screenshots at phone width to the PR.