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>
This commit is contained in:
dekun
+262
-1
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user