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:
John O'Keefe committed 2026-10-17 20:12:54 -04:00
1 parent 454938c31f
commit 8f05f1116e
2 files changed
+16 -1

No files matched your search

+15
View File
@@ -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);