From 08bb87673560b1800f44b399dc9b6c2b688fee29 Mon Sep 17 00:00:00 2001
From: xmanrui <841206367@qq.com>
Date: Mon, 2 Mar 2026 05:27:32 +0800
Subject: [PATCH] fix(ui): improve light theme text contrast in pixel office

---
 app/globals.css           | 95 ++++++++++++++++++++++++++++++++++++---
 app/pixel-office/page.tsx | 16 +++----
 2 files changed, 96 insertions(+), 15 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c25300b..6cd146f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -13,15 +13,96 @@
 }
 
 [data-theme="light"] {
-  --bg: #f8fafc;
+  --bg: #f3f6fb;
   --card: #ffffff;
-  --border: #e2e8f0;
-  --text: #0f172a;
-  --text-muted: #64748b;
-  --accent: #0284c7;
+  --border: #cbd5e1;
+  --text: #0b1220;
+  --text-muted: #475569;
+  --accent: #0369a1;
   --accent2: #7c3aed;
-  --green: #16a34a;
-  --orange: #ea580c;
+  --green: #15803d;
+  --orange: #c2410c;
+}
+
+/* Improve readability for hard-coded dark-theme utility colors in light mode. */
+[data-theme="light"] .text-blue-300 { color: #1d4ed8 !important; }
+[data-theme="light"] .text-sky-300 { color: #0369a1 !important; }
+[data-theme="light"] .text-green-300 { color: #166534 !important; }
+[data-theme="light"] .text-purple-300 { color: #6d28d9 !important; }
+[data-theme="light"] .text-yellow-300 { color: #a16207 !important; }
+[data-theme="light"] .text-cyan-300 { color: #0e7490 !important; }
+[data-theme="light"] .text-orange-300 { color: #c2410c !important; }
+[data-theme="light"] .text-gray-300 { color: #475569 !important; }
+[data-theme="light"] .text-slate-400 { color: #475569 !important; }
+[data-theme="light"] .text-green-400 { color: #166534 !important; }
+[data-theme="light"] .text-yellow-400 { color: #a16207 !important; }
+[data-theme="light"] .text-red-400 { color: #b91c1c !important; }
+[data-theme="light"] .text-blue-400 { color: #1e40af !important; }
+[data-theme="light"] .text-purple-400 { color: #6b21a8 !important; }
+[data-theme="light"] .text-cyan-400 { color: #0e7490 !important; }
+[data-theme="light"] .text-orange-400 { color: #c2410c !important; }
+[data-theme="light"] .text-gray-400 { color: #475569 !important; }
+
+[data-theme="light"] .border-blue-500\/30 { border-color: rgba(59, 130, 246, 0.45) !important; }
+[data-theme="light"] .border-sky-500\/30 { border-color: rgba(14, 165, 233, 0.45) !important; }
+[data-theme="light"] .border-green-500\/30 { border-color: rgba(34, 197, 94, 0.45) !important; }
+[data-theme="light"] .border-purple-500\/30 { border-color: rgba(168, 85, 247, 0.45) !important; }
+[data-theme="light"] .border-yellow-500\/30 { border-color: rgba(234, 179, 8, 0.5) !important; }
+[data-theme="light"] .border-cyan-500\/30 { border-color: rgba(6, 182, 212, 0.45) !important; }
+[data-theme="light"] .border-orange-500\/30 { border-color: rgba(249, 115, 22, 0.45) !important; }
+[data-theme="light"] .border-gray-500\/30 { border-color: rgba(100, 116, 139, 0.45) !important; }
+
+[data-theme="light"] .bg-blue-500\/20 { background-color: rgba(59, 130, 246, 0.14) !important; }
+[data-theme="light"] .bg-sky-500\/20 { background-color: rgba(14, 165, 233, 0.14) !important; }
+[data-theme="light"] .bg-green-500\/20 { background-color: rgba(34, 197, 94, 0.14) !important; }
+[data-theme="light"] .bg-purple-500\/20 { background-color: rgba(168, 85, 247, 0.14) !important; }
+[data-theme="light"] .bg-yellow-500\/20 { background-color: rgba(234, 179, 8, 0.14) !important; }
+[data-theme="light"] .bg-cyan-500\/20 { background-color: rgba(6, 182, 212, 0.14) !important; }
+[data-theme="light"] .bg-orange-500\/20 { background-color: rgba(249, 115, 22, 0.14) !important; }
+[data-theme="light"] .bg-gray-500\/20 { background-color: rgba(100, 116, 139, 0.14) !important; }
+[data-theme="light"] .bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.12) !important; }
+[data-theme="light"] .bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.12) !important; }
+[data-theme="light"] .bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.12) !important; }
+
+/* Pixel Office top agent chips: explicit contrast control for both themes */
+.pixel-agent-chip-state {
+  opacity: 0.82;
+}
+
+.pixel-agent-chip-working {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.35);
+  color: #4ade80;
+}
+
+.pixel-agent-chip-idle {
+  background: rgba(250, 204, 21, 0.14);
+  border-color: rgba(250, 204, 21, 0.35);
+  color: #facc15;
+}
+
+.pixel-agent-chip-neutral {
+  background: rgba(100, 116, 139, 0.22);
+  border-color: rgba(148, 163, 184, 0.42);
+  color: #e2e8f0;
+}
+
+[data-theme="light"] .pixel-agent-chip-working {
+  background: rgba(34, 197, 94, 0.16);
+  border-color: rgba(34, 197, 94, 0.5);
+  color: #166534;
+}
+
+[data-theme="light"] .pixel-agent-chip-idle {
+  background: rgba(234, 179, 8, 0.18);
+  border-color: rgba(202, 138, 4, 0.5);
+  color: #92400e;
+}
+
+[data-theme="light"] .pixel-agent-chip-neutral {
+  background: rgba(148, 163, 184, 0.18);
+  border-color: rgba(100, 116, 139, 0.44);
+  color: #1f2937;
 }
 
 body {
diff --git a/app/pixel-office/page.tsx b/app/pixel-office/page.tsx
index 322dd3c..4a32ef7 100644
--- a/app/pixel-office/page.tsx
+++ b/app/pixel-office/page.tsx
@@ -1060,19 +1060,19 @@ export default function PixelOfficePage() {
         <span className="text-sm font-bold text-[var(--text)] mr-2">{t('pixelOffice.title')}</span>
         <div className="flex flex-wrap gap-2 flex-1">
           {agents.map(agent => (
-            <div key={agent.agentId} className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
-              agent.state === 'working' ? 'bg-green-500/10 border-green-500/30 text-green-500 animate-pulse' :
-              agent.state === 'idle' ? 'bg-yellow-500/10 border-yellow-500/30 text-yellow-500 animate-pulse' :
-              'bg-slate-600/20 border-slate-500/40 text-slate-300'
+            <div key={agent.agentId} className={`pixel-agent-chip inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
+              agent.state === 'working' ? 'pixel-agent-chip-working animate-pulse' :
+              agent.state === 'idle' ? 'pixel-agent-chip-idle animate-pulse' :
+              'pixel-agent-chip-neutral'
             }`}
               {...(agent.state === 'working' ? { style: { animationDuration: '1.3s' } } : {})}
             >
               <span>{agent.emoji}</span>
               <span className="text-sm">{agent.name}</span>
-              {agent.state === 'working' && <span className="text-[10px] uppercase tracking-wider opacity-70">{t('pixelOffice.state.working')}</span>}
-              {agent.state === 'idle' && <span className="text-[10px] uppercase tracking-wider opacity-50">{t('pixelOffice.state.idle')}</span>}
-              {agent.state === 'offline' && <span className="text-[10px] uppercase tracking-wider opacity-40">{t('pixelOffice.state.offline')}</span>}
-              {agent.state === 'waiting' && <span className="text-[10px] uppercase tracking-wider opacity-60">{t('pixelOffice.state.waiting')}</span>}
+              {agent.state === 'working' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.working')}</span>}
+              {agent.state === 'idle' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.idle')}</span>}
+              {agent.state === 'offline' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.offline')}</span>}
+              {agent.state === 'waiting' && <span className="pixel-agent-chip-state text-[10px] uppercase tracking-wider">{t('pixelOffice.state.waiting')}</span>}
             </div>
           ))}
           {agents.length === 0 && (