From 062850280c92e15224e841a80aa653e49a5a16e5 Mon Sep 17 00:00:00 2001 From: Falkan Date: Tue, 17 Mar 2026 10:55:10 -0400 Subject: [PATCH] fix+feat: correct light/dark palette scoping, add theme toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 . Respects OS preference on first visit. --- src/app.css | 50 ++++++++++++++++++++++----------------- src/routes/+layout.svelte | 27 +++++++++++++++++++++ 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/src/app.css b/src/app.css index 5516f00..4d5b404 100644 --- a/src/app.css +++ b/src/app.css @@ -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); +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index cb68cbe..6342736 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,8 +1,30 @@
@@ -14,6 +36,11 @@
  • Converter
  • About
  • Contact
    • +
  • + +