auto theme does not respond to change in system/browser preferences

[techfg]

What version of starlight are you using?

0.21.2

What version of astro are you using?

4.3.5

What package manager are you using?

pnpm

What operating system are you using?

Windows

What browser are you using?

Chrome, Edge, FIrefox

Describe the Bug

When the Starlight theme is set to auto, changing the browser/system preferences does not change the theme on the currently viewed page.

Steps to reproduce:

1. Open browser
2. Go to Starlight Docs
3. Set theme to auto
4. Leaving the theme set to auto on the site, change the browser color mode (Browser->Settings) to a value that is different than the current

Expected Result

Page updates to reflect the change in color mode

Actual Result

Page does not respond to the change and requires a navigation or refresh to apply color change.

Link to Minimal Reproducible Example

https://github.com/withastro/starlight/tree/main/docs

Participation

• I am willing to submit a pull request for this issue.

[at-the-vr]

not sure why they are facing this issue 🤔, theme switching is working fine on my end
edit: found it(atleast for Chrome+Windows 10) changing Browser Mode from Dark to Light or Vice versa has no effect in starlight theme 😕

[techfg]

@at-the-vr - Correct 😃 I've edited my OP repro step #4 to my it more clear the issue occurs when changing the browser color mode. The issue is occurring because Starlight isn't listening for media query change events.

[delucis]

Thank you for the issue @techfg!

Yes, when implementing this initially, I skipped over this as an edge case. Would be happy to look at a PR adding this if you’d like to have a go. Let me know if you have any questions!

[techfg]

Thanks @delucis, just submitted PR #1731!