fix: scope palette overrides to light mode only — prevent dark mode text/bg collision

Root cause: --pico-color and --pico-card-background-color were overridden
unconditionally at :root, clobbering Pico's dark mode tokens. Light-colored
text (#2C2C2C) became invisible against dark card backgrounds (#181c25).

Fix: move Pico token overrides under light-mode selectors only. Dark mode
now inherits Pico's correct dark palette. --color-label (app-specific var)
gets an explicit dark-mode value since Pico doesn't define it.
This commit is contained in:
Falkan
2026-03-17 10:52:57 -04:00
parent b05f421bcb
commit 6f3d02d31c

View File

@@ -5,19 +5,7 @@
--min-col-width: 160px; --min-col-width: 160px;
--grid-gap: 1rem; --grid-gap: 1rem;
/* Warm neutral palette */ /* Shadow for card elevation (theme-neutral) */
--pico-background-color: #F7F5F2;
--pico-card-background-color: #FDFCFB;
--pico-card-border-color: #E8E4DF;
--pico-color: #2C2C2C;
--pico-muted-color: #888880;
--color-label: #555550; /* mid-muted: darker than muted-color, lighter than body text */
--pico-muted-border-color: #E0DCD7;
--pico-primary: #5B7FA6;
--pico-primary-background: rgba(91, 127, 166, 0.08);
--pico-secondary-background: rgba(0, 0, 0, 0.03);
/* Shadow for card elevation */
--shadow-color: 30deg 8% 20%; --shadow-color: 30deg 8% 20%;
--shadow-low: --shadow-low:
0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.06), 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.06),
@@ -29,6 +17,47 @@
3px 5px 7px hsl(var(--shadow-color) / 0.09); 3px 5px 7px hsl(var(--shadow-color) / 0.09);
} }
/* Warm neutral palette — light mode only.
Dark mode falls back to Pico's own dark tokens so text is always legible. */
:root:not([data-theme=dark]),
[data-theme=light] {
--pico-background-color: #F7F5F2;
--pico-card-background-color: #FDFCFB;
--pico-card-border-color: #E8E4DF;
--pico-color: #2C2C2C;
--pico-muted-color: #888880;
--color-label: #555550;
--pico-muted-border-color: #E0DCD7;
--pico-primary: #5B7FA6;
--pico-primary-background: rgba(91, 127, 166, 0.08);
--pico-secondary-background: rgba(0, 0, 0, 0.03);
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--pico-background-color: #F7F5F2;
--pico-card-background-color: #FDFCFB;
--pico-card-border-color: #E8E4DF;
--pico-color: #2C2C2C;
--pico-muted-color: #888880;
--color-label: #555550;
--pico-muted-border-color: #E0DCD7;
--pico-primary: #5B7FA6;
--pico-primary-background: rgba(91, 127, 166, 0.08);
--pico-secondary-background: rgba(0, 0, 0, 0.03);
}
}
/* --color-label fallback for dark mode (Pico doesn't define this var) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-label: #a0a09a;
}
}
[data-theme=dark] {
--color-label: #a0a09a;
}
/* ── Results grid ──────────────────────────────────────────────────────────── */ /* ── Results grid ──────────────────────────────────────────────────────────── */
.results-grid { .results-grid {
display: grid; display: grid;