Skip to content

feat: replace native theme select with floating dropdown UI #32148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
owaiss0 wants to merge 11 commits into
base: production
Choose a base branch
from
+454 −24
Open

feat: replace native theme select with floating dropdown UI #32148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
36fc020
feat: replace native theme select with floating dropdown UI
owaiss0 Jul 18, 2026
9ac993f
fix: address code review warnings for localStorage and global access …
owaiss0 Jul 18, 2026
3f29a7b
fix: add truthy and callable guard for StarlightThemeProvider in Them…
owaiss0 Jul 18, 2026
e141866
perf: apply styling, accessibility, and token optimizations to ThemeD…
owaiss0 Jul 18, 2026
c2165ca
fix: migrate ThemeSelect to robust flexbox layout and clean up styles
owaiss0 Jul 18, 2026
7f78855
fix: correct padding offsets to eliminate icon overlap
owaiss0 Jul 18, 2026
d1f05c6
fix: align caret icon with sidebar chevrons on mobile viewports
owaiss0 Jul 18, 2026
4e00535
fix: address code review findings for ThemeSelect component lifecycle…
owaiss0 Jul 18, 2026
3df0916
fix: prevent StarlightThemeProvider.updatePickers infinite recursion …
owaiss0 Jul 18, 2026
a629eb0
fix: add full ARIA keyboard navigation, focus management, and aria-se…
owaiss0 Jul 18, 2026
90e3ed6
refactor: validate selected theme value using parseTheme
owaiss0 Jul 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions astro.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,6 +185,7 @@ export default defineConfig({
PageTitle: "./src/components/overrides/PageTitle.astro",
SkipLink: "./src/components/overrides/SkipLink.astro",
TableOfContents: "./src/components/overrides/TableOfContents.astro",
ThemeSelect: "./src/components/overrides/ThemeSelect.astro",
},
sidebar,
customCss,
Expand Down
25 changes: 1 addition & 24 deletions src/components/overrides/Header.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import LanguageSelect from "@astrojs/starlight/components/LanguageSelect.astro";
import DocSearch from "@astrojs/starlight-docsearch/DocSearch.astro";
import SiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
import ThemeSelect from "@astrojs/starlight/components/ThemeSelect.astro";
import ThemeSelect from "./ThemeSelect.astro";

import HeaderDropdowns from "../HeaderDropdowns.tsx";
import AgentDirective from "../AgentDirective.astro";
Expand Down Expand Up @@ -155,29 +155,6 @@ import AgentDirective from "../AgentDirective.astro";
height: 1.25rem;
}

:global(starlight-theme-select > label > select) {
line-height: 1.25rem;
margin: 1px;
color: var(--color-header-text-subtle);
}

:global(
starlight-theme-select > label > select:focus,
starlight-theme-select > label > select:focus-visible
) {
margin: 1px;
outline-offset: -4px;
}

:global(starlight-theme-select > label > .label-icon) {
left: 8%;
color: var(--color-header-text-subtle);
}

:global(starlight-theme-select > label > .caret) {
left: 75%;
}

#right-group {
display: none;
align-items: center;
Expand Down
Loading