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.
This commit is contained in:
Aaron Powell
2026-02-03 11:32:53 +11:00
parent eb66c2b1d2
commit fb4fb59625

View File

@@ -1211,22 +1211,25 @@ a:hover {
color: var(--color-text-muted); color: var(--color-text-muted);
} }
.choices__list--dropdown { .choices__list--dropdown,
background-color: var(--color-bg-secondary); .choices__list[aria-expanded] {
border-color: var(--color-border); background-color: var(--color-bg-secondary) !important;
border-color: var(--color-border) !important;
border-radius: 0 0 var(--border-radius) var(--border-radius); border-radius: 0 0 var(--border-radius) var(--border-radius);
z-index: 100; z-index: 100;
max-height: 300px; max-height: 300px;
} }
.choices__list--dropdown .choices__item { .choices__list--dropdown .choices__item,
color: var(--color-text); .choices__list[aria-expanded] .choices__item {
color: var(--color-text) !important;
font-size: 14px; font-size: 14px;
padding: 10px 14px; padding: 10px 14px;
} }
.choices__list--dropdown .choices__item--selectable.is-highlighted { .choices__list--dropdown .choices__item--selectable.is-highlighted,
background-color: var(--color-bg-tertiary); .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background-color: var(--color-bg-tertiary) !important;
} }
.choices__list--multiple .choices__item { .choices__list--multiple .choices__item {
@@ -1260,11 +1263,13 @@ a:hover {
border-radius: var(--border-radius) var(--border-radius) 0 0; 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); 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; display: none;
} }