From f391020f78eb2c022c9445284f8553de84da0302 Mon Sep 17 00:00:00 2001
From: jackyu66git <jackyu666@icloud.com>
Date: Wed, 24 Jun 2026 18:27:41 +0800
Subject: [PATCH] =?UTF-8?q?web:=20fix=20dark=20theme=20readability=20?=
 =?UTF-8?q?=E2=80=94=20explicit=20bright=20colors=20for=20all=20factor=20v?=
 =?UTF-8?q?alues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ChanMacro/web/static/js/dashboard.js | 13 ++++++++++++-
 ChanMacro/web/templates/index.html   | 16 +++++++++++-----
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/ChanMacro/web/static/js/dashboard.js b/ChanMacro/web/static/js/dashboard.js
index cb0b35e..781d698 100644
--- a/ChanMacro/web/static/js/dashboard.js
+++ b/ChanMacro/web/static/js/dashboard.js
@@ -26,21 +26,32 @@ async function loadState() {
 
     // Factors
     document.getElementById("f-price").textContent = d.price_structure.score.toFixed(0);
+    document.getElementById("f-price").style.color =
+      d.price_structure.score >= 60 ? "#3fb950" : d.price_structure.score >= 40 ? "#d29922" : "#f85149";
     document.getElementById("f-price-sub").textContent = d.price_structure.label;
     document.getElementById("f-price-narr").textContent = d.price_structure.narrative;
 
     const b = d.breadth;
     document.getElementById("f-breadth").textContent = b.score.toFixed(0);
-    document.getElementById("f-breadth").className = "factor-value " + (BUCKET_CLASS[b.bucket] || "");
+    document.getElementById("f-breadth").setAttribute("style",
+      "color: " + (b.bucket === "EXTREME" || b.bucket === "STRONG" ? "#3fb950" :
+                   b.bucket === "WEAK" || b.bucket === "PANIC" ? "#f85149" :
+                   b.bucket === "NORMAL" ? "#d29922" : "#e6edf3"));
     document.getElementById("f-breadth-sub").textContent =
       `${b.bucket} · T20=${b.top20.toFixed(0)} T50=${b.top50.toFixed(0)} div=${b.divergence > 0 ? "+" : ""}${b.divergence.toFixed(0)}`;
     document.getElementById("f-breadth-narr").textContent = b.narrative;
 
     document.getElementById("f-oi").textContent = d.oi_state;
+    document.getElementById("f-oi").style.color =
+      d.oi_state === "New Longs" ? "#3fb950" : d.oi_state === "New Shorts" ? "#f85149" :
+      d.oi_state === "Short Covering" ? "#d29922" : d.oi_state === "Long Exit" ? "#f85149" : "#e6edf3";
     document.getElementById("f-oi-sub").textContent = `分数: ${d.oi_score.toFixed(0)}`;
     document.getElementById("f-oi-narr").textContent = d.oi_narrative;
 
     document.getElementById("f-vol").textContent = d.volatility;
+    document.getElementById("f-vol").style.color =
+      d.volatility === "LOW_VOL" ? "#58a6ff" : d.volatility === "NORMAL_VOL" ? "#e6edf3" :
+      d.volatility === "HIGH_VOL" ? "#d29922" : "#f85149";
     document.getElementById("f-vol-sub").textContent = `分数: ${d.price_structure.score.toFixed(0)}`;
   } catch (e) {
     document.getElementById("db-status").textContent = "连接失败";
diff --git a/ChanMacro/web/templates/index.html b/ChanMacro/web/templates/index.html
index 26ad768..1aa3b36 100644
--- a/ChanMacro/web/templates/index.html
+++ b/ChanMacro/web/templates/index.html
@@ -13,7 +13,7 @@
   .card { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
   .hero-regime { font-size: 3rem; font-weight: 700; }
   .hero-conf { font-size: 1.2rem; color: var(--muted); }
-  .factor-value { font-size: 2.2rem; font-weight: 700; }
+  .factor-value { font-size: 2.2rem; font-weight: 700; color: var(--text); }
   .factor-label { color: var(--muted); font-size: 0.85rem; }
   .regime-TREND { color: var(--green); }
   .regime-RANGE { color: var(--orange); }
@@ -26,8 +26,14 @@
   .badge-RANGE { background: #3a2a0a; color: var(--orange); }
   .badge-PANIC { background: #3a0a0a; color: var(--red); }
   .narrative { color: var(--muted); font-size: 0.9rem; }
-  .loading { opacity: 0.5; }
   canvas { max-height: 300px; }
+  .text-muted { color: var(--muted) !important; }
+  .table { color: var(--text); }
+  .table-dark { --bs-table-color: var(--text); --bs-table-bg: var(--card); }
+  .form-select { background-color: var(--card); color: var(--text); border-color: var(--border); }
+  .btn-primary { background-color: var(--blue); border-color: var(--blue); }
+  strong { color: var(--text); }
+  small { color: var(--muted); }
 </style>
 </head>
 <body>
@@ -50,8 +56,8 @@
     <div class="hero-regime" id="hero-regime">—</div>
     <div>
       <span class="badge-regime" id="hero-badge">—</span>
-      <span class="ms-2 text-muted">置信度 <strong id="hero-conf">—</strong></span>
-      <span class="ms-2 text-muted">成熟度 <strong id="hero-maturity">—</strong></span>
+      <span class="ms-2" style="color:#8b949e">置信度 <strong id="hero-conf" style="color:#e6edf3">—</strong></span>
+      <span class="ms-2" style="color:#8b949e">成熟度 <strong id="hero-maturity" style="color:#e6edf3">—</strong></span>
     </div>
   </div>
 
@@ -111,7 +117,7 @@
     <h6 class="mb-3">信号期望查询</h6>
     <div class="row g-2 align-items-end">
       <div class="col-auto">
-        <select class="form-select form-select-sm" id="exp-signal" style="background:#0d1117;color:#e6edf3;border-color:#30363d">
+        <select class="form-select form-select-sm" id="exp-signal">
           <option value="B3">B3 (三买)</option><option value="B2">B2 (二买)</option><option value="B1">B1 (一买)</option>
           <option value="S3">S3 (三卖)</option><option value="S2">S2 (二卖)</option><option value="S1">S1 (一卖)</option>
         </select>