Skip to content
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

Jump to bottom

fix: respond to media query change events when theme is auto #1731

Merged
merged 4 commits into from
Apr 10, 2024
Merged

fix: respond to media query change events when theme is auto #1731

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c16dc52
fix: respond to media query change events when theme is `auto`
techfg Apr 10, 2024
6d30193
Tweak changeset
delucis Apr 10, 2024
ddcc2d3
Use existing loadTheme in handler
delucis Apr 10, 2024
19d163f
Fix listener
delucis Apr 10, 2024
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
5 changes: 5 additions & 0 deletions .changeset/swift-files-wave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@astrojs/starlight': patch
---

Fixes responding to system color scheme changes when theme is `auto`
5 changes: 5 additions & 0 deletions packages/starlight/components/ThemeSelect.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,14 @@ const { labels } = Astro.props;
this.#onThemeChange(this.#parseTheme(e.currentTarget.value));
}
});
matchMedia(`(prefers-color-scheme: light)`).addEventListener('change', this.#handleMediaQuery);
}
}

#handleMediaQuery(): void {
if (this.#loadTheme() === 'auto') this.#onThemeChange('auto');
};

/** Get a typesafe theme string from any JS value (unknown values are coerced to `'auto'`). */
#parseTheme(theme: unknown): Theme {
if (theme === 'auto' || theme === 'dark' || theme === 'light') {
Expand Down
Loading