From 6f3d02d31cfbe7d82988d1ce604fc671b3b43599 Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 10:52:57 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20scope=20palette=20overrides=20to=20light?=
 =?UTF-8?q?=20mode=20only=20=E2=80=94=20prevent=20dark=20mode=20text/bg=20?=
 =?UTF-8?q?collision?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app.css | 55 ++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 6a84a48..5516f00 100644
--- a/src/app.css
+++ b/src/app.css
@@ -5,19 +5,7 @@
   --min-col-width: 160px;
   --grid-gap: 1rem;
 
-  /* Warm neutral palette */
-  --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 for card elevation (theme-neutral) */
   --shadow-color: 30deg 8% 20%;
   --shadow-low:
     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);
 }
 
+/* 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 {
   display: grid;