feat(hub): add dark/light theme toggle with moon and sun icons

Co-authored-by: Cursor <cursoragent@cursor.com>

manual_trading_hub/static/chart.js

@@ -1286,13 +1286,58 @@
     return candleByTime[t] || null;
   }
 
+  function chartThemePalette() {
+    const light = document.documentElement.getAttribute("data-theme") === "light";
+    return light
+      ? {
+          bg: "#f4f7fb",
+          text: "#5a6f85",
+          border: "#c8d4e4",
+          up: "#0a8f5c",
+          down: "#c93552",
+          volUp: "rgba(10, 143, 92, 0.45)",
+          volDown: "rgba(201, 53, 82, 0.45)",
+        }
+      : {
+          bg: "#0a1018",
+          text: "#b8d4e8",
+          border: "#2a4058",
+          up: "#00ff9d",
+          down: "#ff4d6d",
+          volUp: "rgba(0, 255, 157, 0.5)",
+          volDown: "rgba(255, 77, 109, 0.5)",
+        };
+  }
+
+  function applyChartTheme() {
+    if (!chart) return;
+    const p = chartThemePalette();
+    chart.applyOptions({
+      layout: { background: { color: p.bg }, textColor: p.text },
+      rightPriceScale: { borderColor: p.border },
+      timeScale: { borderColor: p.border },
+    });
+    if (candleSeries) {
+      candleSeries.applyOptions({
+        upColor: p.up,
+        downColor: p.down,
+        wickUpColor: p.up,
+        wickDownColor: p.down,
+      });
+    }
+    if (volumeSeries && lastCandles.length) {
+      volumeSeries.setData(buildVolumeData(lastCandles));
+    }
+  }
+
   function buildVolumeData(candles) {
+    const p = chartThemePalette();
     return (candles || []).map(function (c) {
       const up = Number(c.close) >= Number(c.open);
       return {
         time: c.time,
         value: Number(c.volume) || 0,
-        color: up ? "rgba(0, 255, 157, 0.5)" : "rgba(255, 77, 109, 0.5)",
+        color: up ? p.volUp : p.volDown,
       };
     });
   }
@@ -1306,15 +1351,16 @@
       }
       return false;
     }
+    const tp = chartThemePalette();
     chart = LightweightCharts.createChart(chartHost, {
-      layout: { background: { color: "#0a1018" }, textColor: "#b8d4e8" },
+      layout: { background: { color: tp.bg }, textColor: tp.text },
       grid: {
         vertLines: { visible: false },
         horzLines: { visible: false },
       },
-      rightPriceScale: { borderColor: "#2a4058", autoScale: true },
+      rightPriceScale: { borderColor: tp.border, autoScale: true },
       timeScale: {
-        borderColor: "#2a4058",
+        borderColor: tp.border,
         timeVisible: true,
         secondsVisible: false,
         rightOffset: RIGHT_OFFSET_BARS,
@@ -1327,11 +1373,11 @@
     });
 
     const candleOpts = {
-      upColor: "#00ff9d",
-      downColor: "#ff4d6d",
+      upColor: tp.up,
+      downColor: tp.down,
       borderVisible: false,
-      wickUpColor: "#00ff9d",
-      wickDownColor: "#ff4d6d",
+      wickUpColor: tp.up,
+      wickDownColor: tp.down,
       lastValueVisible: false,
       priceLineVisible: false,
       priceFormat: SAFE_PRICE_FORMAT,
@@ -1757,6 +1803,10 @@
     stopPriceTagTimer: stopPriceTagTimer,
   };
 
+  document.addEventListener("hub-theme-change", function () {
+    applyChartTheme();
+  });
+
   if (
     document.getElementById("page-market") &&
     !document.getElementById("page-market").classList.contains("hidden")