falkan/dickloads
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix+feat: correct light/dark palette scoping, add theme toggle

Browse Source 
Fix: palette overrides now use @media(prefers-color-scheme:light) +
[data-theme=light] only — no more :root:not([data-theme=dark]) which
incorrectly matched OS-dark with no attribute set.

Feat: theme toggle button in nav (🌙/☀️), persisted to localStorage,
applied via data-theme attribute on <html>. Respects OS preference on
first visit.
This commit is contained in:
Falkan
2026-03-17 10:55:10 -04:00
parent 6f3d02d31c
commit 062850280c
2 changed files with 55 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/app.css
View File

@@ -18,21 +18,8 @@
}
/* 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);
}
Applied when: (a) OS is light and no data-theme override, or (b) explicit light override.
Dark mode (OS or explicit) falls back entirely to Pico's own dark tokens. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--pico-background-color: #F7F5F2;
@@ -48,15 +35,24 @@
}
}
/* --color-label fallback for dark mode (Pico doesn't define this var) */
[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);
}
/* --color-label: Pico doesn't define this var, so we must set it for dark too */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--color-label: #a0a09a;
}
}
[data-theme=dark] {
--color-label: #a0a09a;
:root:not([data-theme]) { --color-label: #a0a09a; }
}
[data-theme=dark] { --color-label: #a0a09a; }
/* ── Results grid ──────────────────────────────────────────────────────────── */
.results-grid {
@@ -231,3 +227,13 @@
color: var(--pico-muted-color, #666);
text-align: center;
}
/* ── Theme toggle button ───────────────────────────────────────────────────── */
.theme-toggle {
width: auto;
padding: 0.25rem 0.5rem;
margin-bottom: 0;
font-size: 1rem;
line-height: 1;
border-radius: var(--pico-border-radius);
}