dekun/crypto_monitor
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(instance): unify light theme across four exchanges

Browse Source 
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>
This commit is contained in:
dekun
2026-06-04 12:59:42 +08:00
parent d14c629778
commit be3ce18665
21 changed files with 417 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
crypto_monitor_binance/templates/index.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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="theme-color" content="#0b0d14">
<meta name="apple-mobile-web-app-title" content="监控"> <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 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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_binance/templates/key_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 关键位放大</title>
<style> <style>
@@ -24,7 +24,7 @@
#chart{width:100%;height:100%} #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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_binance/templates/login.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>登录 · {{ exchange_display }}</title>
<style> <style>
@@ -94,7 +94,7 @@
font-weight: 600; font-weight: 600;
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<div class="login-theme-bar"> <div class="login-theme-bar">
crypto_monitor_binance/templates/order_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 实盘下单放大</title>
<style> <style>
@@ -25,7 +25,7 @@
.empty{padding:18px;color:#95a2c2} .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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_gate/templates/index.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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="theme-color" content="#0b0d14">
<meta name="apple-mobile-web-app-title" content="监控"> <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 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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_gate/templates/key_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 关键位放大</title>
<style> <style>
@@ -24,7 +24,7 @@
#chart{width:100%;height:100%} #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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_gate/templates/login.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>登录 · {{ exchange_display }}</title>
<style> <style>
@@ -94,7 +94,7 @@
font-weight: 600; font-weight: 600;
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<div class="login-theme-bar"> <div class="login-theme-bar">
crypto_monitor_gate/templates/order_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 实盘下单放大</title>
<style> <style>
@@ -25,7 +25,7 @@
.empty{padding:18px;color:#95a2c2} .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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_gate_bot/templates/index.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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="theme-color" content="#0b0d14">
<meta name="apple-mobile-web-app-title" content="监控"> <meta name="apple-mobile-web-app-title" content="监控">
@@ -211,7 +211,7 @@
.stats-split-row{grid-template-columns:1fr} .stats-split-row{grid-template-columns:1fr}
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_gate_bot/templates/key_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 关键位放大</title>
<style> <style>
@@ -24,7 +24,7 @@
#chart{width:100%;height:100%} #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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_gate_bot/templates/login.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>登录 · {{ exchange_display }}</title>
<style> <style>
@@ -94,7 +94,7 @@
font-weight: 600; font-weight: 600;
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<div class="login-theme-bar"> <div class="login-theme-bar">
crypto_monitor_gate_bot/templates/order_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>{{ exchange_display }} | 实盘下单放大</title>
<style> <style>
@@ -25,7 +25,7 @@
.empty{padding:18px;color:#95a2c2} .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} .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> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_okx/templates/index.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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="theme-color" content="#0b0d14">
<meta name="apple-mobile-web-app-title" content="监控"> <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 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} .stats-period-block .sub{font-size:.78rem;color:#8892b0;margin-bottom:10px;line-height:1.4}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body data-page="{{ page }}"> <body data-page="{{ page }}">
crypto_monitor_okx/templates/key_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>关键位放大 | K线查看</title>
<style> <style>
@@ -23,7 +23,7 @@
#chart-wrap{height:580px;background:#0f1320;border:1px solid #2a3150;border-radius:10px;padding:8px} #chart-wrap{height:580px;background:#0f1320;border:1px solid #2a3150;border-radius:10px;padding:8px}
#chart{width:100%;height:100%} #chart{width:100%;height:100%}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
crypto_monitor_okx/templates/login.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="/static/instance_theme.js?v=1"></script> <script src="/static/instance_theme.js?v=2"></script>
<title>系统登录</title> <title>系统登录</title>
<style> <style>
@@ -84,7 +84,7 @@
font-size: 0.85rem; font-size: 0.85rem;
} }
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<div class="login-theme-bar"> <div class="login-theme-bar">
crypto_monitor_okx/templates/order_focus_v2.html
+3 -3
View File
@@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" data-theme="dark"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <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> <title>实盘下单放大 | 100根K线</title>
<style> <style>
@@ -24,7 +24,7 @@
#chart{width:100%;height:100%} #chart{width:100%;height:100%}
.empty{padding:18px;color:#95a2c2} .empty{padding:18px;color:#95a2c2}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=1"> <link rel="stylesheet" href="/static/instance_theme.css?v=2">
</head> </head>
<body> <body>
scripts/patch_instance_theme_templates.py
+2 -2
View File
@@ -8,8 +8,8 @@ ROOT = Path(__file__).resolve().parents[1]
EXCHANGES = ("crypto_monitor_binance", "crypto_monitor_okx", "crypto_monitor_gate", "crypto_monitor_gate_bot") 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") 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' SCRIPT_TAG = ' <script src="/static/instance_theme.js?v=2"></script>\n'
CSS_LINK = ' <link rel="stylesheet" href="/static/instance_theme.css?v=1">\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="界面主题"> 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="暗色主题"> <button type="button" class="theme-toggle-btn is-active" data-theme-value="dark" aria-pressed="true" title="暗色主题">
static/instance_theme.css
+262 -1
View File
@@ -32,7 +32,8 @@ html[data-theme="light"] .top-nav a.active {
html[data-theme="light"] .stat-item, html[data-theme="light"] .stat-item,
html[data-theme="light"] .card, html[data-theme="light"] .card,
html[data-theme="light"] .meta-item, 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; background: #fff !important;
border-color: #b8c8d8 !important; border-color: #b8c8d8 !important;
} }
@@ -158,3 +159,263 @@ html[data-theme="light"] .theme-toggle-btn.is-active {
max-width: 400px; max-width: 400px;
margin: 0 auto 10px; 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;
}
static/instance_theme.js
+87 -3
View File
@@ -55,6 +55,80 @@
let _linkedTheme = null; 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) { function apply(theme, opts) {
const options = opts || {}; const options = opts || {};
const linked = isHubLinked(); const linked = isHubLinked();
@@ -69,6 +143,7 @@
const meta = document.querySelector('meta[name="theme-color"]'); const meta = document.querySelector('meta[name="theme-color"]');
if (meta) meta.setAttribute("content", META[t]); if (meta) meta.setAttribute("content", META[t]);
root.style.colorScheme = t; root.style.colorScheme = t;
syncInlineStyles(t);
syncToggleUI(); syncToggleUI();
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("instance-theme-change", { detail: { theme: t, hubLinked: linked } }) new CustomEvent("instance-theme-change", { detail: { theme: t, hubLinked: linked } })
@@ -121,11 +196,19 @@
} else { } else {
apply(getStandalone()); apply(getStandalone());
} }
if (document.readyState === "loading") { const onReady = () => {
document.addEventListener("DOMContentLoaded", () => initToggleUI());
} else {
initToggleUI(); 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(); boot();
@@ -137,5 +220,6 @@
apply, apply,
initToggleUI, initToggleUI,
syncToggleUI, syncToggleUI,
syncInlineStyles,
}; };
})(typeof window !== "undefined" ? window : globalThis); })(typeof window !== "undefined" ? window : globalThis);
strategy_templates/strategy_roll.html
+15 -2
View File
@@ -1,7 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN" data-theme="dark">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script src="/static/instance_theme.js?v=2"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>顺势加仓 · {{ exchange_display }}</title> <title>顺势加仓 · {{ exchange_display }}</title>
<style> <style>
@@ -19,10 +20,22 @@
table{width:100%;border-collapse:collapse;font-size:.82rem} table{width:100%;border-collapse:collapse;font-size:.82rem}
th,td{border-bottom:1px solid #2a3150;padding:6px 8px;text-align:left} th,td{border-bottom:1px solid #2a3150;padding:6px 8px;text-align:left}
</style> </style>
<link rel="stylesheet" href="/static/instance_theme.css?v=2">
<meta name="theme-color" content="#0b0d14">
</head> </head>
<body> <body>
<div class="container"> <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"> <div class="top-nav">
<a href="/trade">实盘下单</a> <a href="/trade">实盘下单</a>
<a href="/strategy/trend">趋势回调</a> <a href="/strategy/trend">趋势回调</a>
strategy_templates/strategy_subnav.html
+3 -3
View File
@@ -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"> <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 %}" 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/trend" class="{% if page == 'strategy_trend' %}active{% 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> <a href="/strategy/roll" class="{% if page == 'strategy_roll' %}active{% endif %}">顺势加仓</a>
</div> </div>