LotusGuild/web_template
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Light mode: fix native select popup rendering with dark chrome
Lint / JS (eslint) (push) Successful in 8s
Details

Browse Source 
.lt-select declares `color-scheme: dark` on the element itself, which beats the
`color-scheme: light` set on <html> by the light theme, so browsers drew the
dropdown popup (and its scrollbar) with dark chrome even in light mode. The
option list is also hardcoded to #0d1117/#c9d1d9 with no light override.

Adds light-mode overrides for both: `color-scheme: light` per element, option
colours from --bg-input/--text-primary, and the checked/hover highlight from
--accent-orange-dim/--accent-orange.

Verified with computed styles in headless chromium: in light mode the select
reports color-scheme light, unselected options are #ffffff on near-black text,
and the checked option uses the orange tint instead of #1a2030.
This commit is contained in:
jared
2026-08-07 22:50:53 -04:00
parent 0af46954d7
commit 378a8cdab5
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
base.css
+19
View File
@@ -3745,6 +3745,25 @@ html[data-theme="light"] .lt-textarea:focus-visible {
border-color: var(--accent-cyan);
box-shadow: var(--box-glow-cyan);
}
/* Native <select> popup in light mode.
`.lt-select` sets `color-scheme: dark` on the element itself, which beats the
`color-scheme: light` declared on <html>, so the browser drew the dropdown with
dark chrome even in light mode. Reset it per element, and re-tint the option
list, which is otherwise hardcoded to #0d1117 for the dark theme. */
html[data-theme="light"] .lt-select { color-scheme: light; }
html[data-theme="light"] .lt-select option,
html[data-theme="light"] select option {
background: var(--bg-input);
color: var(--text-primary);
}
html[data-theme="light"] .lt-select option:hover,
html[data-theme="light"] .lt-select option:focus,
html[data-theme="light"] .lt-select option:checked,
html[data-theme="light"] select option:checked {
background: var(--accent-orange-dim);
color: var(--accent-orange);
}
html[data-theme="light"] .lt-label { color: var(--text-muted); }
/* — Buttons — */