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:
committed by
GitHub
parent
530dc9cb3b
commit
c7c1074f28
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user