From 2cd0eaa51185cdfb68b992a86b719a59792df588 Mon Sep 17 00:00:00 2001
From: Daniel Onyejesi <danielonyejesi@gmail.com>
Date: Sun, 22 Mar 2026 19:18:51 -0400
Subject: [PATCH] Fix: force color-scheme on model selects to prevent OS dark
 mode bleed-through

---
 public/css/styles.css | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index a6e5535..9a0d4a8 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -43,8 +43,9 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 .header-right{display:flex;align-items:center;gap:12px;}
 .model-selector{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);padding:6px 12px;border-radius:8px;}
 .model-selector label{font-size:12px;}
-.model-selector select{padding:4px 8px;border:1px solid rgba(255,255,255,0.3);border-radius:6px;background:rgba(255,255,255,0.2);color:white;font-size:12px;font-family:inherit;max-width:220px;}
-.model-selector select option{background:var(--g800);color:white;}
+.model-selector select{padding:4px 8px;border:1px solid rgba(255,255,255,0.3);border-radius:6px;background:rgba(255,255,255,0.2);color:white;font-size:12px;font-family:inherit;max-width:220px;color-scheme:dark;}
+.model-selector select option{background:#1f2937;color:#f3f4f6;}
+.model-selector select optgroup{background:#111827;color:#9ca3af;}
 .cost-badge{font-size:10px;padding:2px 8px;background:rgba(16,185,129,0.3);border:1px solid rgba(16,185,129,0.5);border-radius:10px;color:#6ee7b7;font-weight:600;white-space:nowrap;}
 .header-buttons{display:flex;gap:6px;}
 .btn-header{background:rgba(255,255,255,0.15);border:none;color:white;width:36px;height:36px;border-radius:8px;cursor:pointer;font-size:14px;transition:background 0.2s;}
@@ -269,7 +270,9 @@ body{font-family:'Inter',system-ui,sans-serif;background:var(--g50);color:var(--
 
 /* Per-tab model selector */
 .demo-field-model { flex: 1; min-width: 180px; }
-.demo-field-model select { min-width: 180px; max-width: 260px; }
+.demo-field-model select { min-width: 180px; max-width: 260px; color-scheme: light; }
+.tab-model-select { color-scheme: light; }
+.tab-model-select option, .tab-model-select optgroup { background: white; color: var(--g800); }
 
 /* Labs textarea */
 .visit-labs, .lab-values {