From fb4fb59625d3b2425819aca5083c68f682a2b896 Mon Sep 17 00:00:00 2001
From: Aaron Powell <me@aaron-powell.com>
Date: Tue, 3 Feb 2026 11:32:53 +1100
Subject: [PATCH] fix: improve dropdown text visibility in dark/light modes

and ensure dropdown background and text colors properly use CSS variables
in both dark and light themes.
---
 website/public/styles/global.css | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/website/public/styles/global.css b/website/public/styles/global.css
index ddd77c9c..55d6244a 100644
--- a/website/public/styles/global.css
+++ b/website/public/styles/global.css
@@ -1211,22 +1211,25 @@ a:hover {
   color: var(--color-text-muted);
 }
 
-.choices__list--dropdown {
-  background-color: var(--color-bg-secondary);
-  border-color: var(--color-border);
+.choices__list--dropdown,
+.choices__list[aria-expanded] {
+  background-color: var(--color-bg-secondary) !important;
+  border-color: var(--color-border) !important;
   border-radius: 0 0 var(--border-radius) var(--border-radius);
   z-index: 100;
   max-height: 300px;
 }
 
-.choices__list--dropdown .choices__item {
-  color: var(--color-text);
+.choices__list--dropdown .choices__item,
+.choices__list[aria-expanded] .choices__item {
+  color: var(--color-text) !important;
   font-size: 14px;
   padding: 10px 14px;
 }
 
-.choices__list--dropdown .choices__item--selectable.is-highlighted {
-  background-color: var(--color-bg-tertiary);
+.choices__list--dropdown .choices__item--selectable.is-highlighted,
+.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
+  background-color: var(--color-bg-tertiary) !important;
 }
 
 .choices__list--multiple .choices__item {
@@ -1260,11 +1263,13 @@ a:hover {
   border-radius: var(--border-radius) var(--border-radius) 0 0;
 }
 
-.is-open .choices__list--dropdown {
+.is-open .choices__list--dropdown,
+.is-open .choices__list[aria-expanded] {
   border-color: var(--color-link);
 }
 
-.choices__list--dropdown .choices__item--selectable::after {
+.choices__list--dropdown .choices__item--selectable::after,
+.choices__list[aria-expanded] .choices__item--selectable::after {
   display: none;
 }