From ee7ef03423367cdeef3ffaaf01acb015f9befdd5 Mon Sep 17 00:00:00 2001
From: Matcry12 <fdtywadw@gmail.com>
Date: Sat, 11 Apr 2026 01:17:04 +0700
Subject: [PATCH] fix: theme/language select dropdown unreadable in dark mode

Starlight's Select component uses --sl-color-bg-nav for dropdown option
backgrounds, which resolves to --sl-color-gray-6. Our design system
overrides gray-6 to a near-transparent accent color, causing dropdown
options to render as white text on white background.

Fix by explicitly setting --sl-color-bg-nav to a solid surface color
in both dark and light themes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/styles/starlight-overrides.css | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/styles/starlight-overrides.css b/src/styles/starlight-overrides.css
index e7e83cb..e5b4d96 100644
--- a/src/styles/starlight-overrides.css
+++ b/src/styles/starlight-overrides.css
@@ -238,6 +238,17 @@ header {
   background-color: rgba(248, 250, 252, 0.85);
 }
 
+/* ── Header controls: theme & language selectors ── */
+/* Starlight's Select.astro reads --sl-color-bg-nav for <option> bg.
+   Our gray-6 override makes it near-transparent, so dropdown options
+   render as white-on-white. Fix by pointing it to a solid surface. */
+:root {
+  --sl-color-bg-nav: var(--color-bg-base);
+}
+[data-theme="light"] {
+  --sl-color-bg-nav: var(--color-bg-base);
+}
+
 /* ============================================================
    Sidebar improvements
    ============================================================ */