feat(theme): 亮色主题基础设施 + 全部图表主题化

- lib/theme.ts: localStorage 持久化 + useTheme hook (本页/跨标签页同步) + ChartTheme 图表调色板 (ECharts/lightweight-charts 画布不吃 CSS 变量, 统一从这里取色) - index.html: 去掉写死的 class=dark, 换预渲染内联脚本 (默认暗色, 切过亮色则保持), 避免首屏闪烁 - Layout: 侧边栏底部亮/暗切换按钮 (设置入口上方) - 图表主题化 (切换即时生效, 无需刷新): · EChartsIntraday / EChartsCandlestick / CandlestickChart (lightweight-charts applyOptions) / AnalysisKChart · 回测 4 图 (StrategyNav/FactorIC/FactorGroupNav/ReturnDistribution) · Sentiment 页双图序列颜色 (红涨绿跌/MA线) 双主题通用保持不变; 轴/网格/十字线/ tooltip/信息栏背景按主题切换 CSS 变量亮色板 index.css 里本就有 (:root), 首次真正启用
2026-09-12 16:44:15 +08:00 · 2026-07-03 13:51:17 +08:00
parent 114a52969c
commit 8abf7e338a
11 changed files with 313 additions and 132 deletions
@@ -1,7 +1,20 @@
 <!doctype html>
-<html lang="zh-CN" class="dark">
+<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
+    <script>
+      // 预渲染主题脚本: 首屏前设置 html.dark, 避免亮暗闪烁 (FOUC)。
+      // 默认暗色; 用户切过亮色后 (localStorage tf-theme=light) 保持亮色。
+      (function () {
+        try {
+          if (localStorage.getItem('tf-theme') !== 'light') {
+            document.documentElement.classList.add('dark')
+          }
+        } catch (e) {
+          document.documentElement.classList.add('dark')
+        }
+      })()
+    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="theme-color" content="#8B5CF6" />