fix: improve theme select legibility in dark mode on Windows Firefox

[dashitongzhi]

Description

Fixes the theme select dropdown having illegible colors in dark mode on Windows Firefox.

On Windows, Firefox renders native <select> dropdown options with white backgrounds in dark mode, making the text nearly invisible. The hovered/checked option text color is also white-on-white.

Before

The theme select in dark mode on Windows Firefox shows white option backgrounds with poor contrast, making it hard to read available options.

After

Explicit dark-theme color rules are applied to the select and option elements, using the existing Starlight design tokens (--sl-color-gray-6, --sl-color-text, --sl-color-accent-high, --sl-color-text-invert).

Changes

• Added dark-mode-specific styles for select, option, and option:checked in Select.astro
• Added hover state styles for options in dark mode
• Uses existing CSS custom properties for consistency with the rest of the theme

Fixes #3426

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	5b5a6ec
🔍 Latest deploy log	https://app.netlify.com/projects/astro-starlight/deploys/6a05e5f23855e000075a73fa
😎 Deploy Preview	https://deploy-preview-3900--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 5b5a6ec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[astrobot-houston]

Hello! Thank you for opening your first PR to Starlight! ✨

Here’s what will happen next:

1. Our GitHub bots will run to check your changes.
   If they spot any issues you will see some error messages on this PR.
   Don’t hesitate to ask any questions if you’re not sure what these mean!

2. In a few minutes, you’ll be able to see a preview of your changes on Netlify 🤩

3. One or more of our maintainers will take a look and may ask you to make changes.
   We try to be responsive, but don’t worry if this takes a few days.

[Copilot]

Pull request overview

Improves the legibility of Starlight’s theme (and other Select.astro-based) dropdown options in dark mode on Windows Firefox by applying explicit dark-theme colors to the native <select> and its <option> states.

Changes:

• Add dark-mode-specific background/text colors for select, option, and option:checked.
• Add a dark-mode hover style for option:hover to avoid white-on-white states in Firefox on Windows.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[HiDeoo]

Thanks for the contribution 🙌

If I'm not missing anything, the suggested solution hit the limitation described in this comment, or this one where I link to the exact Firefox bug, which prevent Starlight itself from setting a solid background colour, which may or may not match the nav bar.

For example, the homepage of the deploy preview of the PR now renders as such on Chrome:

Let me know if I'm missing something.

[dashitongzhi]

Fix: Scope dark mode select fix to Firefox only

HiDeoo, thanks for the review! You're right — the fix was too broad.

Changes made:

1. Firefox-only targeting: Wrapped in @supports (-moz-appearance: none) so only Firefox is affected. Chrome/Safari/Edge are completely untouched.

2. Removed select from the selector: Only targeting option and option:checked now, NOT the <select> element itself. This preserves the transparent background on the homepage and other pages.

3. Use semantic token: Changed --sl-color-gray-6 → --sl-color-bg-nav for better theme consistency (Copilot's suggestion).

The dropdown options will still have proper dark backgrounds in Firefox, but the select element itself stays transparent — so the homepage hero nav bar looks correct in all browsers.

[HiDeoo]

Thanks for the update.

As I mentioned in this comment, I was personally never able to reproduce the issue on Windows at the time. Before potentially discussing this new approach further and its potential drawbacks, I would like to make sure it's still an issue or the issue didn't change.

I'm mentioning this because I just tested to reproduce again now on a Windows machine, and while I still can't reproduce the issue, I did notice on the latest Firefox version, the dropdown menu now renders differently from the previous screenshots I shared here. Now, in dark mode, the dropdown background is the expected color and no longer white which was not the case before.

Would you be able to share the Firefox version you're currently using for testing, and if not the latest, could you try updating and testing the default version (e.g. on https://starlight.astro.build/ and not this PR) and share a new screenshot to see if it matches what I'm seeing?

I know it's a bit annoying but issues that we can't easily reproduce or don't know all the requirements to reproduce can be very difficult to fix, and need extra care.