From 21b6f9344e8f535c84f82e857bfda48d8872283c Mon Sep 17 00:00:00 2001
From: ghreprimand <github@jrpmail.ca>
Date: Tue, 2 Jun 2026 09:09:15 -0500
Subject: [PATCH] Normalize native select option theming (#1178)

Co-authored-by: ghreprimand <203024559+ghreprimand@users.noreply.github.com>
---
 static/style.css                        | 27 +++++++++++++++++++-
 tests/test_select_dropdown_theme_css.py | 33 +++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 tests/test_select_dropdown_theme_css.py

diff --git a/static/style.css b/static/style.css
index 4f7c6ae..a10b6c9 100644
--- a/static/style.css
+++ b/static/style.css
@@ -58,6 +58,11 @@
   --color-save-green: var(--color-success);
   --color-link-hover: #66c7ff;
   --color-subheader: #6b8a94;
+  --select-bg: var(--bg);
+  --select-fg: var(--fg);
+  --select-option-bg: color-mix(in srgb, var(--panel) 74%, var(--bg));
+  --select-option-fg: var(--fg);
+  --select-option-active-bg: color-mix(in srgb, var(--accent, var(--red)) 24%, var(--panel));
   /* Warm accent — used by the Goals/Today UI in Notes. Lives as a token so
      themes can override without touching the goal CSS. */
   --accent-warm: #d19a66;
@@ -78,6 +83,11 @@
   --hl-builtin: #0070a0;
   --hl-variable: #383a42;
   --hl-params: #4a4f5c;
+  --select-bg: #eaeaea;
+  --select-fg: var(--fg);
+  --select-option-bg: var(--panel);
+  --select-option-fg: var(--fg);
+  --select-option-active-bg: color-mix(in srgb, var(--red) 16%, var(--panel));
 }
 
 /* ── Reset & Base ── */
@@ -1723,7 +1733,22 @@ body.bg-pattern-sparkles {
     textarea { width:100%; min-height:32px; height:auto; max-height:30lh; overflow-y:auto; resize:none; }
     button { height:32px; padding:0 10px; }
     #chat-form button[type="submit"] { height:38px; }
-    select { height:32px; color-scheme: dark; }
+    select {
+      height:32px;
+      color-scheme: dark;
+      background-color: var(--select-bg);
+      color: var(--select-fg);
+    }
+    select option,
+    select optgroup {
+      background-color: var(--select-option-bg);
+      color: var(--select-option-fg);
+    }
+    select option:checked {
+      background-color: var(--select-option-active-bg);
+      color: var(--select-option-fg);
+    }
+    :root.light select { color-scheme: light; }
     .chat-container {
       flex:1;
       display:flex;
diff --git a/tests/test_select_dropdown_theme_css.py b/tests/test_select_dropdown_theme_css.py
new file mode 100644
index 0000000..bcfdf23
--- /dev/null
+++ b/tests/test_select_dropdown_theme_css.py
@@ -0,0 +1,33 @@
+from pathlib import Path
+
+
+STYLE_CSS = Path(__file__).resolve().parents[1] / "static" / "style.css"
+
+
+def _style_text() -> str:
+    return STYLE_CSS.read_text(encoding="utf-8")
+
+
+def test_native_select_options_use_theme_tokens():
+    css = _style_text()
+
+    assert "--select-option-bg:" in css
+    assert "--select-option-fg:" in css
+    assert "--select-option-active-bg:" in css
+    assert "select option,\n    select optgroup" in css
+    assert "background-color: var(--select-option-bg);" in css
+    assert "color: var(--select-option-fg);" in css
+    assert "select option:checked" in css
+    assert "background-color: var(--select-option-active-bg);" in css
+
+
+def test_light_theme_keeps_native_selects_light():
+    css = _style_text()
+
+    light_theme_start = css.index(":root.light {")
+    light_theme_end = css.index("}", light_theme_start)
+    light_theme_block = css[light_theme_start:light_theme_end]
+
+    assert "--select-bg: #eaeaea;" in light_theme_block
+    assert "--select-option-bg: var(--panel);" in light_theme_block
+    assert ":root.light select { color-scheme: light; }" in css