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:
55
src/app.css
55
src/app.css
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user