LotusGuild/tinker_tickets
4
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Light mode: status dropdown no longer renders dark (#19)
Lint / PHP (phpcs PSR-12) (push) Successful in 23s
Details
Lint / JS (eslint) (push) Successful in 11s
Details
Lint / PHP requirements (version + extensions) (push) Successful in 22s
Details
Lint / Notify on failure (push) Skipped
Details
Security / PHP Security (semgrep) (push) Successful in 1m11s
Details
Lint / Deploy (push) Successful in 2s
Details

Browse Source 
Two separate causes, both light-mode-only:

1. base.css `.lt-select` sets `color-scheme: dark` on the element itself, which
   outranks the `color-scheme: light` the light theme sets on <html>, so the
   native dropdown popup kept dark chrome. The option list is also hardcoded
   #0d1117/#c9d1d9 with no light override. Fixed with light overrides for both
   (synced from web_template, where the same fix landed as 378a8cd).

2. ticket.css coloured the status select with var(--lt-success), --lt-amber,
   --lt-cyan and --lt-danger — none of which are defined anywhere in the
   project, so all four always fell through to hardcoded neon fallbacks. Now
   uses the --accent-* tokens, which carry the same hues and are redefined for
   light mode. The selectors also lead with .lt-select: at two classes they lost
   to base.css's `html[data-theme="light"] .lt-select` (0,2,1) and every status
   was repainted near-black in light mode.

Verified with computed styles in headless chromium — all four statuses in both
themes (8/8), plus the popup colour-scheme and option colours.
This commit is contained in:
jared
2026-08-07 22:51:16 -04:00
parent 1d03800ab2
commit a5b0655623
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/base.css
+19
View File
@@ -3737,6 +3737,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 — */