From be3ce186652947a5f43b4676e5e73ee07a614308 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 4 Jun 2026 12:59:42 +0800
Subject: [PATCH] style(instance): unify light theme across four exchanges

Extend instance_theme CSS/JS for trade, strategy, records, journal and stats tabs; remap inline dark colors; bump static assets to v2.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 crypto_monitor_binance/templates/index.html   |   6 +-
 .../templates/key_focus_v2.html               |   6 +-
 crypto_monitor_binance/templates/login.html   |   6 +-
 .../templates/order_focus_v2.html             |   6 +-
 crypto_monitor_gate/templates/index.html      |   6 +-
 .../templates/key_focus_v2.html               |   6 +-
 crypto_monitor_gate/templates/login.html      |   6 +-
 .../templates/order_focus_v2.html             |   6 +-
 crypto_monitor_gate_bot/templates/index.html  |   6 +-
 .../templates/key_focus_v2.html               |   6 +-
 crypto_monitor_gate_bot/templates/login.html  |   6 +-
 .../templates/order_focus_v2.html             |   6 +-
 crypto_monitor_okx/templates/index.html       |   6 +-
 .../templates/key_focus_v2.html               |   6 +-
 crypto_monitor_okx/templates/login.html       |   6 +-
 .../templates/order_focus_v2.html             |   6 +-
 scripts/patch_instance_theme_templates.py     |   4 +-
 static/instance_theme.css                     | 263 +++++++++++++++++-
 static/instance_theme.js                      |  90 +++++-
 strategy_templates/strategy_roll.html         |  17 +-
 strategy_templates/strategy_subnav.html       |   6 +-
 21 files changed, 417 insertions(+), 59 deletions(-)
diff --git a/crypto_monitor_binance/templates/index.html b/crypto_monitor_binance/templates/index.html
index abd449f..848dd62 100644
--- a/crypto_monitor_binance/templates/index.html
+++ b/crypto_monitor_binance/templates/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <meta name="theme-color" content="#0b0d14">
     <meta name="apple-mobile-web-app-title" content="监控">
@@ -231,7 +231,7 @@
         .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
         .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body data-page="{{ page }}">
diff --git a/crypto_monitor_binance/templates/key_focus_v2.html b/crypto_monitor_binance/templates/key_focus_v2.html
index 9caa241..522fe32 100644
--- a/crypto_monitor_binance/templates/key_focus_v2.html
+++ b/crypto_monitor_binance/templates/key_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
   <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
   <title>{{ exchange_display }} | 关键位放大</title>
   <style>
@@ -24,7 +24,7 @@
     #chart{width:100%;height:100%}
     .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
   </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_binance/templates/login.html b/crypto_monitor_binance/templates/login.html
index 5bdb406..38a348c 100644
--- a/crypto_monitor_binance/templates/login.html
+++ b/crypto_monitor_binance/templates/login.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>登录 · {{ exchange_display }}</title>
     <style>
@@ -94,7 +94,7 @@
             font-weight: 600;
         }
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <div class="login-theme-bar">
diff --git a/crypto_monitor_binance/templates/order_focus_v2.html b/crypto_monitor_binance/templates/order_focus_v2.html
index 57e0a96..b40bb43 100644
--- a/crypto_monitor_binance/templates/order_focus_v2.html
+++ b/crypto_monitor_binance/templates/order_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>{{ exchange_display }} | 实盘下单放大</title>
     <style>
@@ -25,7 +25,7 @@
         .empty{padding:18px;color:#95a2c2}
         .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_gate/templates/index.html b/crypto_monitor_gate/templates/index.html
index abd449f..848dd62 100644
--- a/crypto_monitor_gate/templates/index.html
+++ b/crypto_monitor_gate/templates/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <meta name="theme-color" content="#0b0d14">
     <meta name="apple-mobile-web-app-title" content="监控">
@@ -231,7 +231,7 @@
         .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
         .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body data-page="{{ page }}">
diff --git a/crypto_monitor_gate/templates/key_focus_v2.html b/crypto_monitor_gate/templates/key_focus_v2.html
index 1a6a6c5..053a3ba 100644
--- a/crypto_monitor_gate/templates/key_focus_v2.html
+++ b/crypto_monitor_gate/templates/key_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
   <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
   <title>{{ exchange_display }} | 关键位放大</title>
   <style>
@@ -24,7 +24,7 @@
     #chart{width:100%;height:100%}
     .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
   </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_gate/templates/login.html b/crypto_monitor_gate/templates/login.html
index 5bdb406..38a348c 100644
--- a/crypto_monitor_gate/templates/login.html
+++ b/crypto_monitor_gate/templates/login.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>登录 · {{ exchange_display }}</title>
     <style>
@@ -94,7 +94,7 @@
             font-weight: 600;
         }
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <div class="login-theme-bar">
diff --git a/crypto_monitor_gate/templates/order_focus_v2.html b/crypto_monitor_gate/templates/order_focus_v2.html
index 57e0a96..b40bb43 100644
--- a/crypto_monitor_gate/templates/order_focus_v2.html
+++ b/crypto_monitor_gate/templates/order_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>{{ exchange_display }} | 实盘下单放大</title>
     <style>
@@ -25,7 +25,7 @@
         .empty{padding:18px;color:#95a2c2}
         .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_gate_bot/templates/index.html b/crypto_monitor_gate_bot/templates/index.html
index da29bcd..e743fcf 100644
--- a/crypto_monitor_gate_bot/templates/index.html
+++ b/crypto_monitor_gate_bot/templates/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <meta name="theme-color" content="#0b0d14">
     <meta name="apple-mobile-web-app-title" content="监控">
@@ -211,7 +211,7 @@
             .stats-split-row{grid-template-columns:1fr}
         }
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_gate_bot/templates/key_focus_v2.html b/crypto_monitor_gate_bot/templates/key_focus_v2.html
index 1a6a6c5..053a3ba 100644
--- a/crypto_monitor_gate_bot/templates/key_focus_v2.html
+++ b/crypto_monitor_gate_bot/templates/key_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
   <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
   <title>{{ exchange_display }} | 关键位放大</title>
   <style>
@@ -24,7 +24,7 @@
     #chart{width:100%;height:100%}
     .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
   </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_gate_bot/templates/login.html b/crypto_monitor_gate_bot/templates/login.html
index 5bdb406..38a348c 100644
--- a/crypto_monitor_gate_bot/templates/login.html
+++ b/crypto_monitor_gate_bot/templates/login.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>登录 · {{ exchange_display }}</title>
     <style>
@@ -94,7 +94,7 @@
             font-weight: 600;
         }
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <div class="login-theme-bar">
diff --git a/crypto_monitor_gate_bot/templates/order_focus_v2.html b/crypto_monitor_gate_bot/templates/order_focus_v2.html
index 8d12fd6..1662e00 100644
--- a/crypto_monitor_gate_bot/templates/order_focus_v2.html
+++ b/crypto_monitor_gate_bot/templates/order_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>{{ exchange_display }} | 实盘下单放大</title>
     <style>
@@ -25,7 +25,7 @@
         .empty{padding:18px;color:#95a2c2}
         .exchange-tag{font-size:.72rem;font-weight:600;color:#b8f5d0;background:#14241e;border:1px solid #2d6a4f;padding:4px 10px;border-radius:999px;margin-left:8px}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_okx/templates/index.html b/crypto_monitor_okx/templates/index.html
index c96d93d..c839342 100644
--- a/crypto_monitor_okx/templates/index.html
+++ b/crypto_monitor_okx/templates/index.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <meta name="theme-color" content="#0b0d14">
     <meta name="apple-mobile-web-app-title" content="监控">
@@ -231,7 +231,7 @@
         .stats-period-block h3{font-size:1rem;color:#dbe4ff;margin-bottom:4px}
         .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body data-page="{{ page }}">
diff --git a/crypto_monitor_okx/templates/key_focus_v2.html b/crypto_monitor_okx/templates/key_focus_v2.html
index ffa8343..22ba7d9 100644
--- a/crypto_monitor_okx/templates/key_focus_v2.html
+++ b/crypto_monitor_okx/templates/key_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
   <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
   <title>关键位放大 | K线查看</title>
   <style>
@@ -23,7 +23,7 @@
     #chart-wrap{height:580px;background:#0f1320;border:1px solid #2a3150;border-radius:10px;padding:8px}
     #chart{width:100%;height:100%}
   </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/crypto_monitor_okx/templates/login.html b/crypto_monitor_okx/templates/login.html
index 1711d83..3428686 100644
--- a/crypto_monitor_okx/templates/login.html
+++ b/crypto_monitor_okx/templates/login.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>系统登录</title>
     <style>
@@ -84,7 +84,7 @@
             font-size: 0.85rem;
         }
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <div class="login-theme-bar">
diff --git a/crypto_monitor_okx/templates/order_focus_v2.html b/crypto_monitor_okx/templates/order_focus_v2.html
index 8341a5e..1d9f740 100644
--- a/crypto_monitor_okx/templates/order_focus_v2.html
+++ b/crypto_monitor_okx/templates/order_focus_v2.html
@@ -1,8 +1,8 @@
-<!DOCTYPE html>
+﻿<!DOCTYPE html>
 <html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
-<script src="/static/instance_theme.js?v=1"></script>
+<script src="/static/instance_theme.js?v=2"></script>
 
     <title>实盘下单放大 | 100根K线</title>
     <style>
@@ -24,7 +24,7 @@
         #chart{width:100%;height:100%}
         .empty{padding:18px;color:#95a2c2}
     </style>
-    <link rel="stylesheet" href="/static/instance_theme.css?v=1">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
 
 </head>
 <body>
diff --git a/scripts/patch_instance_theme_templates.py b/scripts/patch_instance_theme_templates.py
index dc9a4da..a851e6a 100644
--- a/scripts/patch_instance_theme_templates.py
+++ b/scripts/patch_instance_theme_templates.py
@@ -8,8 +8,8 @@ ROOT = Path(__file__).resolve().parents[1]
 EXCHANGES = ("crypto_monitor_binance", "crypto_monitor_okx", "crypto_monitor_gate", "crypto_monitor_gate_bot")
 FILES = ("index.html", "login.html", "key_focus_v2.html", "order_focus_v2.html")
 
-SCRIPT_TAG = '    <script src="/static/instance_theme.js?v=1"></script>\n'
-CSS_LINK = '    <link rel="stylesheet" href="/static/instance_theme.css?v=1">\n'
+SCRIPT_TAG = '    <script src="/static/instance_theme.js?v=2"></script>\n'
+CSS_LINK = '    <link rel="stylesheet" href="/static/instance_theme.css?v=2">\n'
 
 THEME_TOGGLE = """        <div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
             <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
diff --git a/static/instance_theme.css b/static/instance_theme.css
index c08e0b6..b1da6a2 100644
--- a/static/instance_theme.css
+++ b/static/instance_theme.css
@@ -32,7 +32,8 @@ html[data-theme="light"] .top-nav a.active {
 html[data-theme="light"] .stat-item,
 html[data-theme="light"] .card,
 html[data-theme="light"] .meta-item,
-html[data-theme="light"] .list-item {
+html[data-theme="light"] .list-item,
+html[data-theme="light"] .journal-card {
   background: #fff !important;
   border-color: #b8c8d8 !important;
 }
@@ -158,3 +159,263 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
   max-width: 400px;
   margin: 0 auto 10px;
 }
+
+/* ── 交易执行 / 复盘 / 统计（index 内联样式覆盖）── */
+html[data-theme="light"] .list-window-bar,
+html[data-theme="light"] .export-bar a {
+  background: #fff !important;
+  border-color: #b8c8d8 !important;
+  color: #1a2838 !important;
+}
+
+html[data-theme="light"] .list-window-bar label,
+html[data-theme="light"] .export-bar {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .stats-segment-block {
+  border-top-color: #c8d4e0 !important;
+}
+
+html[data-theme="light"] .stats-segment-block h2,
+html[data-theme="light"] .stats-period-block h3,
+html[data-theme="light"] .key-history h3 {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .stats-period-block .sub,
+html[data-theme="light"] .key-history .sub,
+html[data-theme="light"] .pos-section-title,
+html[data-theme="light"] .pos-empty {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .stats-period-block {
+  border-bottom-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .key-history {
+  border-top-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .pos-card,
+html[data-theme="light"] .pos-empty {
+  background: #fff !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .pos-card-symbol strong,
+html[data-theme="light"] .pos-value,
+html[data-theme="light"] .pos-value.price-flat {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .pos-label,
+html[data-theme="light"] .pos-meta,
+html[data-theme="light"] .pos-footer,
+html[data-theme="light"] .pos-ex-orders-title,
+html[data-theme="light"] .pos-ex-order-row {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .pos-meta-item::after {
+  color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .pos-meta-on {
+  color: #006e9a !important;
+}
+
+html[data-theme="light"] .pos-side-long {
+  background: rgba(0, 110, 154, 0.12) !important;
+  color: #006e9a !important;
+}
+
+html[data-theme="light"] .pos-side-short {
+  background: rgba(180, 50, 50, 0.1) !important;
+  color: #b03030 !important;
+}
+
+html[data-theme="light"] .pos-entrust-btn,
+html[data-theme="light"] .stats-card .stats-toggle,
+html[data-theme="light"] .btn-del[style*="1f3a5a"],
+html[data-theme="light"] a.btn-del[style*="1f3a5a"],
+html[data-theme="light"] .detail-modal .panel-fs,
+html[data-theme="light"] .review-card-fs-btn {
+  background: #e8eef5 !important;
+  color: #006e9a !important;
+}
+
+html[data-theme="light"] .pos-ex-orders {
+  border-top-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .pos-ex-cancel-btn {
+  background: #eef3f8 !important;
+  color: #5b4fc7 !important;
+}
+
+html[data-theme="light"] .tpsl-modal {
+  background: #fff !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .tpsl-modal h3 {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .tpsl-modal-cancel {
+  background: #eef3f8 !important;
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .list-item {
+  background: #f6f9fc !important;
+  border-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .price-flat {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .detail-modal .panel,
+html[data-theme="light"] .ai-result {
+  background: #fff !important;
+}
+
+html[data-theme="light"] .detail-modal .panel-title {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .journal-card .form-grid label,
+html[data-theme="light"] .journal-card .sub {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .btn-del:not([style*="1f3a5a"]) {
+  background: #fff5f5 !important;
+  color: #b03030 !important;
+  border: 1px solid rgba(176, 48, 48, 0.25) !important;
+}
+
+html[data-theme="light"] table th {
+  background: #eef3f8 !important;
+}
+
+html[data-theme="light"] .strategy-subnav {
+  border-bottom-color: #d0dae4 !important;
+}
+
+/* ── 策略交易 / 策略记录（strategy_templates 内联）── */
+html[data-theme="light"] .strategy-records-page h2,
+html[data-theme="light"] .plan-card-title,
+html[data-theme="light"] .sr-panel-title,
+html[data-theme="light"] .sr-summary .sr-sym,
+html[data-theme="light"] .sr-detail-grid .val,
+html[data-theme="light"] .plan-cell .val {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .strategy-records-tip,
+html[data-theme="light"] .plan-card-meta,
+html[data-theme="light"] .plan-cell .lbl,
+html[data-theme="light"] .sr-panel-count,
+html[data-theme="light"] .sr-empty,
+html[data-theme="light"] .plan-dca-title {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .plan-position-card,
+html[data-theme="light"] .sr-filters,
+html[data-theme="light"] .sr-panel {
+  background: #fff !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .sr-filters select,
+html[data-theme="light"] .sr-filters input[type="datetime-local"] {
+  background: #f6f9fc !important;
+  color: #142232 !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .sr-chip {
+  background: #fff !important;
+  color: #4a6078 !important;
+  border-color: #b8c8d8 !important;
+}
+
+html[data-theme="light"] .sr-chip.active {
+  background: rgba(0, 110, 154, 0.12) !important;
+  color: #006e9a !important;
+  border-color: rgba(0, 95, 140, 0.35) !important;
+}
+
+html[data-theme="light"] .sr-item {
+  background: #f6f9fc !important;
+  border-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .sr-summary,
+html[data-theme="light"] .sr-detail,
+html[data-theme="light"] .plan-cell .val.pnl-neutral {
+  color: #1a2838 !important;
+}
+
+html[data-theme="light"] .sr-summary:hover {
+  background: rgba(0, 110, 154, 0.06) !important;
+}
+
+html[data-theme="light"] .sr-detail {
+  border-top-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .plan-dca-block {
+  border-top-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .plan-dca-table th,
+html[data-theme="light"] .plan-dca-table td,
+html[data-theme="light"] .sr-dca-table th,
+html[data-theme="light"] .sr-dca-table td {
+  border-bottom-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .plan-dca-table th,
+html[data-theme="light"] .sr-dca-table th {
+  color: #4a6078 !important;
+}
+
+html[data-theme="light"] .trend-running-plans {
+  border-top-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .plan-card-meta .accent,
+html[data-theme="light"] .sr-panel-title.trend,
+html[data-theme="light"] .sr-summary::before {
+  color: #006e9a !important;
+}
+
+html[data-theme="light"] .sr-panel-title.roll {
+  color: #a06010 !important;
+}
+
+html[data-theme="light"] .btn-close-plan {
+  background: #fff5f5 !important;
+  color: #b03030 !important;
+}
+
+html[data-theme="light"] .running-plans-stack .plan-position-card[style*="8892b0"] {
+  color: #4a6078 !important;
+  background: #f6f9fc !important;
+}
+
+html[data-theme="light"] button[style*="1f4a3a"] {
+  background: #e8f5ef !important;
+  color: #087a50 !important;
+}
+
+html[data-theme="light"] .strategy-trading-grid .card,
+html[data-theme="light"] .dual-panel-grid .card {
+  background: #fff !important;
+}
diff --git a/static/instance_theme.js b/static/instance_theme.js
index afddfea..f87bf5e 100644
--- a/static/instance_theme.js
+++ b/static/instance_theme.js
@@ -55,6 +55,80 @@
 
   let _linkedTheme = null;
 
+  /** 模板内联暗色 → 亮色（切换时重写 style 属性） */
+  const INLINE_HEX_LIGHT = {
+    "#cfd3ef": "#1a2838",
+    "#8892b0": "#4a6078",
+    "#9aa3c4": "#4a6078",
+    "#8b95a8": "#4a6078",
+    "#8b95b8": "#4a6078",
+    "#6a7598": "#4a6078",
+    "#7d8799": "#4a6078",
+    "#6d7689": "#4a6078",
+    "#dbe4ff": "#142232",
+    "#f0f2ff": "#142232",
+    "#e8ecf4": "#142232",
+    "#c5cce0": "#4a6078",
+    "#b8c4ff": "#142232",
+    "#8fc8ff": "#006e9a",
+    "#6ab8ff": "#006e9a",
+    "#6eb5ff": "#006e9a",
+    "#121726": "#ffffff",
+    "#151a2a": "#eef3f8",
+    "#141a2a": "#ffffff",
+    "#141923": "#ffffff",
+    "#141a2e": "#ffffff",
+    "#0f1424": "#f6f9fc",
+    "#0f1420": "#f6f9fc",
+    "#0f1117": "#d8e2ec",
+    "#1a2034": "#eef3f8",
+    "#1a2030": "#ffffff",
+    "#1f3a5a": "#e8eef5",
+    "#2f2f44": "#dde5ec",
+    "#2a3f6c": "rgba(0,110,154,0.14)",
+    "#304164": "rgba(0,95,140,0.22)",
+    "#2a3150": "#b8c8d8",
+    "#2a3152": "#b8c8d8",
+    "#3a5a8a": "rgba(0,95,140,0.35)",
+    "#2a3348": "#b8c8d8",
+    "#243050": "rgba(0,75,115,0.16)",
+    "#2a3558": "#d0dae4",
+    "#3a4468": "#c8d4e0",
+    "#3a4a66": "#b8c8d8",
+    "#3a3f52": "#dde5ec",
+    "#3d4659": "#b8c8d8",
+    "#1f2740": "#eef3f8",
+    "#1f2a44": "rgba(0,110,154,0.1)",
+    "#1f4a3a": "#e8f5ef",
+    "#2a4a7a": "#e8eef5",
+    "#3a3048": "#eef3f8",
+    "#d4b8ff": "#5b4fc7",
+    "#e6e8ef": "#1a2838",
+  };
+
+  function remapInlineStyle(style, theme) {
+    if (!style) return style;
+    if (theme !== "light") return style;
+    let out = style;
+    for (const [from, to] of Object.entries(INLINE_HEX_LIGHT)) {
+      out = out.replace(new RegExp(from.replace("#", "\\#"), "gi"), to);
+    }
+    return out;
+  }
+
+  function syncInlineStyles(theme, root) {
+    const scope = root || document;
+    scope.querySelectorAll("[style]").forEach((el) => {
+      const raw = el.getAttribute("style");
+      if (!raw) return;
+      if (!el.dataset.instStyleBase) {
+        el.dataset.instStyleBase = raw;
+      }
+      const base = el.dataset.instStyleBase;
+      el.setAttribute("style", theme === "light" ? remapInlineStyle(base, "light") : base);
+    });
+  }
+
   function apply(theme, opts) {
     const options = opts || {};
     const linked = isHubLinked();
@@ -69,6 +143,7 @@
     const meta = document.querySelector('meta[name="theme-color"]');
     if (meta) meta.setAttribute("content", META[t]);
     root.style.colorScheme = t;
+    syncInlineStyles(t);
     syncToggleUI();
     document.dispatchEvent(
       new CustomEvent("instance-theme-change", { detail: { theme: t, hubLinked: linked } })
@@ -121,11 +196,19 @@
     } else {
       apply(getStandalone());
     }
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () => initToggleUI());
-    } else {
+    const onReady = () => {
       initToggleUI();
+      syncInlineStyles(get());
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", onReady);
+    } else {
+      onReady();
     }
+    document.addEventListener("instance-theme-change", (ev) => {
+      const t = ev.detail && ev.detail.theme;
+      if (t) syncInlineStyles(t);
+    });
   }
 
   boot();
@@ -137,5 +220,6 @@
     apply,
     initToggleUI,
     syncToggleUI,
+    syncInlineStyles,
   };
 })(typeof window !== "undefined" ? window : globalThis);
diff --git a/strategy_templates/strategy_roll.html b/strategy_templates/strategy_roll.html
index 739d375..36486d4 100644
--- a/strategy_templates/strategy_roll.html
+++ b/strategy_templates/strategy_roll.html
@@ -1,7 +1,8 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-theme="dark">
 <head>
     <meta charset="UTF-8">
+    <script src="/static/instance_theme.js?v=2"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>顺势加仓 · {{ exchange_display }}</title>
     <style>
@@ -19,10 +20,22 @@
         table{width:100%;border-collapse:collapse;font-size:.82rem}
         th,td{border-bottom:1px solid #2a3150;padding:6px 8px;text-align:left}
     </style>
+    <link rel="stylesheet" href="/static/instance_theme.css?v=2">
+    <meta name="theme-color" content="#0b0d14">
 </head>
 <body>
 <div class="container">
-    <h1>策略交易 · 顺势加仓 <span style="font-size:.85rem;color:#8fc8ff">{{ exchange_display }}</span></h1>
+    <div class="header-row" style="justify-content:space-between;margin-bottom:8px">
+        <h1 style="margin:0">策略交易 · 顺势加仓 <span style="font-size:.85rem;color:#8fc8ff">{{ exchange_display }}</span></h1>
+        <div class="theme-toggle instance-theme-toggle" role="group" aria-label="界面主题">
+            <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
+                <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M12.1 3a9 9 0 1 0 8.9 11 6.5 6.5 0 1 1-8.9-11z"/></svg>
+            </button>
+            <button type="button" class="theme-toggle-btn" data-theme-value="light" aria-pressed="false" title="亮色主题">
+                <svg class="theme-icon" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
+            </button>
+        </div>
+    </div>
     <div class="top-nav">
         <a href="/trade">实盘下单</a>
         <a href="/strategy/trend">趋势回调</a>
diff --git a/strategy_templates/strategy_subnav.html b/strategy_templates/strategy_subnav.html
index f53393d..e91839d 100644
--- a/strategy_templates/strategy_subnav.html
+++ b/strategy_templates/strategy_subnav.html
@@ -1,4 +1,4 @@
-<div class="strategy-subnav" style="display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #2a3150">
-    <a href="/strategy/trend" class="{% if page == 'strategy_trend' %}active{% endif %}" style="padding:6px 12px;border-radius:8px;text-decoration:none;font-size:.85rem;{% if page == 'strategy_trend' %}background:#2a3f6c;color:#dbe4ff;border:1px solid #4a6a9a{% else %}background:#151a2a;color:#8fc8ff;border:1px solid #304164{% endif %}">趋势回调</a>
-    <a href="/strategy/roll" class="{% if page == 'strategy_roll' %}active{% endif %}" style="padding:6px 12px;border-radius:8px;text-decoration:none;font-size:.85rem;{% if page == 'strategy_roll' %}background:#2a3f6c;color:#dbe4ff;border:1px solid #4a6a9a{% else %}background:#151a2a;color:#8fc8ff;border:1px solid #304164{% endif %}">顺势加仓</a>
+<div class="strategy-subnav top-nav" style="margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #2a3150">
+    <a href="/strategy/trend" class="{% if page == 'strategy_trend' %}active{% endif %}">趋势回调</a>
+    <a href="/strategy/roll" class="{% if page == 'strategy_roll' %}active{% endif %}">顺势加仓</a>
 </div>
