fix(css): native select popups follow the theme — color-scheme per scheme + themed option entries
The stats page's Library-tab switcher (and every other native
<select>) rendered its dropdown LIST in the OS light scheme in dark
themes: the closed control is themed by its own classes, but the
popup list is UA-rendered and ignores page CSS unless the document
declares color-scheme (Chrome path) or the options carry explicit
colors (Firefox path). Both are now in place:
- :root { color-scheme: dark } (the default palette — Tokyo Night —
and all eleven themes except latte are dark),
- .theme-catppuccin-latte { color-scheme: light },
- select option { background-color: var(--bg-secondary); color:
var(--text-primary) } as the belt for engines where the popup
escapes the document cascade.
style.css regenerated via build:css:prod; verified served by the
rebuilt container.
This commit is contained in:
1 parent
454938c31f
commit
8f05f1116e
2 files changed
+16
-1
No files matched your search
@@ -10,6 +10,12 @@
|
||||
* theme-flash on load).
|
||||
*/
|
||||
:root {
|
||||
/* Native form controls (select dropdown lists, scrollbars, inputs)
|
||||
follow the OS light scheme without this — the stats library
|
||||
switcher's popup rendered white in every dark theme. Dark is the
|
||||
document default (all themes except latte are dark). */
|
||||
color-scheme: dark;
|
||||
|
||||
--bg-primary: #1a1b26;
|
||||
--bg-secondary: #16161e;
|
||||
--text-primary: #c0caf5;
|
||||
@@ -115,6 +121,8 @@
|
||||
}
|
||||
|
||||
.theme-catppuccin-latte {
|
||||
color-scheme: light;
|
||||
|
||||
--bg-primary: #eff1f5;
|
||||
--bg-secondary: #ffffff;
|
||||
--text-primary: #4c4f69;
|
||||
@@ -158,6 +166,13 @@
|
||||
--shadow-bar: 0 1px 0 rgba(76, 79, 105, 0.08), 0 4px 16px rgba(76, 79, 105, 0.10);
|
||||
}
|
||||
|
||||
/* Select popup entries follow the theme (the closed control is
|
||||
themed by its own classes; the option LIST is what UA-styles light) */
|
||||
select option {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* App-wide keyboard focus affordance (accessibility) */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
|
||||
Reference in new issue
Block a user