From d2c4cfd687ffb085cd0d5b162df873bb4bde36b2 Mon Sep 17 00:00:00 2001
From: dashitongzhi <civilization.cn@outlook.com>
Date: Tue, 12 May 2026 09:17:59 +0800
Subject: [PATCH 1/2] fix: improve theme select legibility in dark mode on
 Windows Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Firefox on Windows renders native <select> dropdown option elements with
incorrect colors in dark mode — option backgrounds appear white and
hovered/checked text is invisible.

Add explicit dark-theme color rules for the select and option elements
so that backgrounds use the dark surface color and text remains legible.

Fixes #3426
---
 packages/starlight/components/Select.astro | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/packages/starlight/components/Select.astro b/packages/starlight/components/Select.astro
index 369bc3c3eda..ea0bd43c0a9 100644
--- a/packages/starlight/components/Select.astro
+++ b/packages/starlight/components/Select.astro
@@ -78,6 +78,25 @@ interface Props {
 			color: var(--sl-color-gray-1);
 		}
 
+		/*
+		 * Firefox on Windows renders native select dropdowns with incorrect
+		 * colors in dark mode — option backgrounds appear white and
+		 * checked/hovered text is invisible. Explicitly set colors for the
+		 * dark theme to ensure legibility.
+		 * See: https://github.com/withastro/starlight/issues/3426
+		 */
+		:global([data-theme='dark']) select,
+		:global([data-theme='dark']) select option,
+		:global([data-theme='dark']) select option:checked {
+			background-color: var(--sl-color-gray-6);
+			color: var(--sl-color-text);
+		}
+
+		:global([data-theme='dark']) select option:hover {
+			background-color: var(--sl-color-accent-high);
+			color: var(--sl-color-text-invert);
+		}
+
 		@media (min-width: 50rem) {
 			select {
 				font-size: var(--sl-text-sm);

From 5b5a6ec1ddc6637e1f6ef64409e6cf1f1bccbb8b Mon Sep 17 00:00:00 2001
From: Kral <118106297+dashitongzhi@users.noreply.github.com>
Date: Thu, 14 May 2026 23:10:38 +0800
Subject: [PATCH 2/2] fix: scope dark mode select fix to Firefox only, preserve
 transparent background

Address review feedback from HiDeoo:
- Use @supports (-moz-appearance: none) to target Firefox only
- Only fix option backgrounds, not the select element itself
- Use --sl-color-bg-nav instead of --sl-color-gray-6
---
 packages/starlight/components/Select.astro | 29 ++++++++++++----------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/starlight/components/Select.astro b/packages/starlight/components/Select.astro
index ea0bd43c0a9..a6ebc1b3fc0 100644
--- a/packages/starlight/components/Select.astro
+++ b/packages/starlight/components/Select.astro
@@ -79,22 +79,25 @@ interface Props {
 		}
 
 		/*
-		 * Firefox on Windows renders native select dropdowns with incorrect
-		 * colors in dark mode — option backgrounds appear white and
-		 * checked/hovered text is invisible. Explicitly set colors for the
-		 * dark theme to ensure legibility.
+		 * Firefox on Windows renders native select option dropdowns with
+		 * incorrect colors in dark mode — option backgrounds appear white
+		 * and checked/hovered text is invisible. Use @supports to target
+		 * Firefox (-moz-appearance) so other browsers are unaffected.
+		 * Only fix option backgrounds, not the select itself, to preserve
+		 * transparent backgrounds on pages like the homepage.
 		 * See: https://github.com/withastro/starlight/issues/3426
 		 */
-		:global([data-theme='dark']) select,
-		:global([data-theme='dark']) select option,
-		:global([data-theme='dark']) select option:checked {
-			background-color: var(--sl-color-gray-6);
-			color: var(--sl-color-text);
-		}
+		@supports (-moz-appearance: none) {
+			:global([data-theme='dark']) select option,
+			:global([data-theme='dark']) select option:checked {
+				background-color: var(--sl-color-bg-nav);
+				color: var(--sl-color-text);
+			}
 
-		:global([data-theme='dark']) select option:hover {
-			background-color: var(--sl-color-accent-high);
-			color: var(--sl-color-text-invert);
+			:global([data-theme='dark']) select option:hover {
+				background-color: var(--sl-color-accent-high);
+				color: var(--sl-color-text-invert);
+			}
 		}
 
 		@media (min-width: 50rem) {