fix: improve dropdown text readability in dark theme on usage page (#997)

- Add global CSS rules for select elements in dark mode
- Use color-scheme property to signal dark mode to browser
- Explicitly style option elements with dark theme colors
- Fix UsageStats dropdown to use correct CSS variables (bg-surface, text-text-main)

Fixes dropdown text being unreadable in dark theme on usage page:
- Provider filter dropdown
- Table view selector (Model/Account/API Key/Endpoint)
- Pagination page size selector

Tested in Chrome and Firefox with both light and dark themes.
This commit is contained in:
Zanuar Tri Romadon
2026-05-10 21:07:59 +07:00
committed by GitHub
parent 530dc9cb3b
commit c7c1074f28
4 changed files with 20 additions and 1 deletions

View File

@@ -114,6 +114,22 @@
color-scheme: dark;
}
/* ============================================================
Fix native select dropdowns in dark mode
============================================================ */
select {
color-scheme: light;
}
.dark select {
color-scheme: dark;
}
.dark select option {
background-color: var(--color-surface);
color: var(--color-text-main);
}
@theme inline {
/* Brand scale */
--color-brand-50: var(--color-brand-50);