Fix options review light theme dark card/filter styles.

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

lib/common/static/instance_theme.css

@@ -5412,6 +5412,113 @@ html[data-theme="light"] .settings-account-summary {
   box-shadow: 0 1px 3px rgba(20, 34, 50, 0.06);
 }
 
+/* 期权复盘 · 亮色主题（覆盖面板内暗色默认变量） */
+html[data-theme="light"] .options-review-wrap {
+  --or-section-bg: #fff;
+  --or-section-shadow: 0 1px 3px rgba(20, 34, 50, 0.06);
+  --or-border: #9eb0c4;
+  --or-border-soft: #c8d4e0;
+  --or-border-faint: #dce4ec;
+  --or-text: #142232;
+  --or-title: #142232;
+  --or-muted: #3a5068;
+  --or-filters-bg: #eef3f8;
+  --or-tile-bg: #f6f9fc;
+  --or-badge-bg: rgba(0, 110, 154, 0.1);
+  --or-accent-bg: rgba(0, 110, 154, 0.12);
+  --or-accent-fg: #004d6e;
+  --or-accent-border: rgba(0, 95, 140, 0.28);
+  --or-row-active-bg: rgba(0, 110, 154, 0.08);
+  --or-row-hover-bg: rgba(0, 110, 154, 0.06);
+  --or-modal-bg: #fff;
+  --or-modal-shadow: 0 12px 40px rgba(20, 34, 50, 0.18);
+  --or-backdrop: rgba(20, 34, 50, 0.45);
+  --or-img-bg: #eef3f8;
+  color: #142232;
+}
+
+html[data-theme="light"] .options-review-wrap .or-section {
+  background: #fff !important;
+  border-color: #9eb0c4 !important;
+  box-shadow: 0 1px 3px rgba(20, 34, 50, 0.06);
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-section-title,
+html[data-theme="light"] .options-review-wrap .or-detail-modal-head h3,
+html[data-theme="light"] .options-review-wrap .or-page-head h2 {
+  color: #142232 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-section-desc,
+html[data-theme="light"] .options-review-wrap .muted,
+html[data-theme="light"] .options-review-wrap .sub {
+  color: #3a5068 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-filters {
+  background: #eef3f8 !important;
+  border-color: #c8d4e0 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-kpi-tile,
+html[data-theme="light"] .options-review-wrap .or-stat-card,
+html[data-theme="light"] .options-review-wrap .or-detail-img-cell {
+  background: #f6f9fc !important;
+  border-color: #c8d4e0 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-tab {
+  background: #fff !important;
+  color: #006e9a !important;
+  border-color: rgba(0, 95, 140, 0.22) !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-tab.active {
+  background: rgba(0, 110, 154, 0.12) !important;
+  color: #004d6e !important;
+  border-color: rgba(0, 95, 140, 0.28) !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-step {
+  background: rgba(0, 110, 154, 0.12) !important;
+  color: #004d6e !important;
+  border-color: rgba(0, 95, 140, 0.28) !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-badge {
+  background: rgba(0, 110, 154, 0.1) !important;
+  color: #004d6e !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-detail-modal {
+  background: #fff !important;
+  color: #142232 !important;
+  border-color: #9eb0c4 !important;
+  box-shadow: 0 12px 40px rgba(20, 34, 50, 0.18);
+}
+
+html[data-theme="light"] .options-review-wrap .or-detail-backdrop {
+  background: rgba(20, 34, 50, 0.45) !important;
+}
+
+html[data-theme="light"] .options-review-wrap .options-strike-table thead th {
+  background: #eef3f8 !important;
+  color: #334155 !important;
+  border-bottom: 1px solid #c8d4e0 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .options-strike-table th,
+html[data-theme="light"] .options-review-wrap .options-strike-table td {
+  color: #142232 !important;
+  border-bottom-color: #d0dae4 !important;
+}
+
+html[data-theme="light"] .options-review-wrap .or-trades-table tr.or-row-active,
+html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover {
+  background: rgba(0, 110, 154, 0.08) !important;
+}
+
 .pos-pnl-profit {
   color: #7ee787;
 }

lib/common/static/options_review.js

@@ -115,17 +115,17 @@
     );
   }
 
-  function pnlStyle(v) {
+  function pnlClass(v) {
     var n = Number(v);
-    if (n > 0) return "color:#3dd68c";
-    if (n < 0) return "color:#f07178";
+    if (n > 0) return "pos-pnl-profit";
+    if (n < 0) return "pos-pnl-loss";
     return "";
   }
 
-  function resultStyle(tag) {
+  function resultClass(tag) {
     var t = String(tag || "").trim();
-    if (t === "盈利") return "color:#3dd68c;font-weight:600";
-    if (t === "亏损") return "color:#f07178;font-weight:600";
+    if (t === "盈利") return "pos-pnl-profit";
+    if (t === "亏损") return "pos-pnl-loss";
     return "";
   }
 
@@ -395,8 +395,8 @@
               "<td>" +
               escapeHtml(tradeTitle(t)) +
               "</td>" +
-              '<td style="' +
-              pnlStyle(t.realized_pnl_total) +
+              '<td class="' +
+              pnlClass(t.realized_pnl_total) +
               '">' +
               fmtPnl(t.realized_pnl_total) +
               "</td>" +
@@ -496,8 +496,8 @@
               "<td>" +
               escapeHtml(direction || "—") +
               "</td>" +
-              '<td style="' +
-              pnlStyle(t.realized_pnl_total) +
+              '<td class="' +
+              pnlClass(t.realized_pnl_total) +
               '">' +
               fmtPnl(t.realized_pnl_total) +
               "</td>" +
@@ -516,8 +516,8 @@
               "<td>" +
               escapeHtml(entryLogic || "—") +
               "</td>" +
-              '<td style="' +
-              resultStyle(t.result_tag) +
+              '<td class="' +
+              resultClass(t.result_tag) +
               '">' +
               escapeHtml(t.result_tag || "—") +
               "</td>" +
@@ -713,10 +713,20 @@
       }
       meta.innerHTML = cells
         .map(function (pair) {
+          var cls = "";
+          if (pair[0] === "盈亏" || pair[0] === "永续盈亏" || pair[0] === "期权盈亏") {
+            cls = pnlClass(t.realized_pnl_total);
+            if (pair[0] === "永续盈亏") cls = pnlClass(t.realized_pnl_perp);
+            if (pair[0] === "期权盈亏") cls = pnlClass(t.realized_pnl_options);
+          } else if (pair[0] === "结果") {
+            cls = resultClass(e.result_tag);
+          }
           return (
             "<div><div class=\"muted\" style=\"font-size:11px\">" +
             escapeHtml(pair[0]) +
-            "</div><div>" +
+            '</div><div class="' +
+            cls +
+            '">' +
             escapeHtml(pair[1]) +
             "</div></div>"
           );
@@ -739,7 +749,9 @@
                   escapeHtml(legRoleLabel(leg.leg_role)) +
                   "</td><td>" +
                   escapeHtml(leg.inst_id || leg.symbol || "") +
-                  "</td><td>" +
+                  "</td><td class=\"" +
+                  pnlClass(leg.realized_pnl) +
+                  "\">" +
                   fmtPnl(leg.realized_pnl) +
                   "</td><td>" +
                   escapeHtml(closeReasonLabel(leg.close_reason)) +
@@ -811,14 +823,14 @@
           ["平均持有", fmtHold(k.avg_hold_sec)],
         ]
           .map(function (pair) {
-            var style = "";
-            if (pair[0] === "累计盈亏") style = pnlStyle(k.pnl_sum);
-            if (pair[0] === "平均盈亏") style = pnlStyle(k.avg_pnl);
+            var cls = "";
+            if (pair[0] === "累计盈亏") cls = pnlClass(k.pnl_sum);
+            if (pair[0] === "平均盈亏") cls = pnlClass(k.avg_pnl);
             return (
               '<div class="or-kpi-tile"><div class="or-kpi-label">' +
               pair[0] +
-              '</div><div class="or-kpi-value" style="' +
-              style +
+              '</div><div class="or-kpi-value' +
+              (cls ? " " + cls : "") +
               '">' +
               pair[1] +
               "</div></div>"

lib/instance/templates/embed_shell.html

@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="/static/instance_theme_early.css?v=4">
     <link rel="stylesheet" href="/static/account_risk_badge.css?v=4">
     <link rel="stylesheet" href="/static/instance_page.css?v=11">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=104">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=105">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ pwa_app_name }}</title>

lib/instance/templates/index.html

@@ -18,7 +18,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ pwa_app_name }}</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=11">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=104">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=105">
 
 </head>
 <body

lib/options/templates/options_review_panel.html

@@ -14,40 +14,44 @@
         .or-page-head h2{font-size:1.05rem;font-weight:650;margin-right:auto;letter-spacing:.02em}
         .or-section{
           margin:0;padding:14px 16px 16px;
-          border:1px solid rgba(127,127,127,.28);
+          border:1px solid var(--or-border, rgba(127,127,127,.28));
           border-radius:12px;
-          background:rgba(18,23,38,.55);
-          box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
+          background:var(--or-section-bg, rgba(18,23,38,.55));
+          box-shadow:var(--or-section-shadow, 0 1px 0 rgba(255,255,255,.03) inset);
+          color:var(--or-text, inherit);
         }
         .or-section-head{
           display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
           margin-bottom:12px;padding-bottom:10px;
-          border-bottom:1px solid rgba(127,127,127,.22);
+          border-bottom:1px solid var(--or-border-soft, rgba(127,127,127,.22));
         }
         .or-section-head > div{min-width:0;flex:1}
         .or-step{
           flex-shrink:0;width:1.55rem;height:1.55rem;border-radius:999px;
           display:inline-flex;align-items:center;justify-content:center;
           font-size:.72rem;font-weight:700;
-          background:rgba(99,102,241,.28);color:#c7c9ff;
-          border:1px solid rgba(129,140,248,.45);
+          background:var(--or-accent-bg, rgba(99,102,241,.28));
+          color:var(--or-accent-fg, #c7c9ff);
+          border:1px solid var(--or-accent-border, rgba(129,140,248,.45));
         }
-        .or-section-title{font-size:.95rem;font-weight:650;line-height:1.3}
-        .or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45}
+        .or-section-title{font-size:.95rem;font-weight:650;line-height:1.3;color:var(--or-title, inherit)}
+        .or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45;color:var(--or-muted, inherit)}
         .or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
         .or-toolbar{display:flex;flex-direction:column;gap:0;margin:0}
         .or-tab{
-          border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit;
+          border:1px solid var(--or-border, rgba(127,127,127,.35));background:transparent;color:inherit;
           padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.78rem;
         }
         .or-tab.active{
-          background:rgba(99,102,241,.28);border-color:rgba(129,140,248,.55);
-          color:#e8e9ff;font-weight:600;
+          background:var(--or-accent-bg, rgba(99,102,241,.28));
+          border-color:var(--or-accent-border, rgba(129,140,248,.55));
+          color:var(--or-accent-fg, #e8e9ff);font-weight:600;
         }
         .or-filters{
           display:flex;flex-wrap:wrap;gap:8px;align-items:center;
           margin:0;padding:10px 12px;border-radius:10px;
-          background:rgba(0,0,0,.22);border:1px solid rgba(127,127,127,.18);
+          background:var(--or-filters-bg, rgba(0,0,0,.22));
+          border:1px solid var(--or-border-soft, rgba(127,127,127,.18));
         }
         .or-filters select,.or-filters input[type="search"],.or-filters input[type="datetime-local"]{
           font-size:.76rem;min-height:2rem;
@@ -56,18 +60,19 @@
         .or-filters label{display:flex;align-items:center;gap:5px;font-size:.72rem;opacity:.85}
         .or-badge{
           display:inline-block;padding:1px 7px;border-radius:999px;
-          background:rgba(127,127,127,.22);font-size:.7rem;vertical-align:middle;
+          background:var(--or-badge-bg, rgba(127,127,127,.22));font-size:.7rem;vertical-align:middle;
         }
         .or-list-title{display:none}
         .or-trades-table,.or-reviewed-table{font-size:.78rem}
         .or-trades-table tr.or-row-active{
-          outline:1px solid rgba(129,140,248,.55);background:rgba(99,102,241,.1);
+          outline:1px solid var(--or-accent-border, rgba(129,140,248,.55));
+          background:var(--or-row-active-bg, rgba(99,102,241,.1));
         }
         .or-reviewed-table tbody tr{cursor:pointer}
-        .or-reviewed-table tbody tr:hover{background:rgba(99,102,241,.08)}
+        .or-reviewed-table tbody tr:hover{background:var(--or-row-hover-bg, rgba(99,102,241,.08))}
         .or-pager{
           display:flex;align-items:center;gap:8px;margin-top:10px;
-          padding-top:8px;border-top:1px dashed rgba(127,127,127,.2);font-size:.74rem;
+          padding-top:8px;border-top:1px dashed var(--or-border-soft, rgba(127,127,127,.2));font-size:.74rem;
         }
         .or-list-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease}
         .or-trades-table-wrap,.or-reviewed-table-wrap{min-height:9.5rem;overflow-x:auto}
@@ -77,8 +82,8 @@
           gap:8px;margin-bottom:12px;
         }
         .or-kpi-tile{
-          border:1px solid rgba(127,127,127,.22);border-radius:10px;
-          padding:10px 12px;background:rgba(0,0,0,.2);min-width:0;
+          border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px;
+          padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.2));min-width:0;
         }
         .or-kpi-label{font-size:.7rem;opacity:.7;margin-bottom:4px}
         .or-kpi-value{font-size:.95rem;font-weight:650;letter-spacing:.01em;word-break:break-all}
@@ -86,16 +91,16 @@
           display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;
         }
         .or-stat-card{
-          border:1px solid rgba(127,127,127,.22);border-radius:10px;
-          padding:10px 12px;background:rgba(0,0,0,.16);font-size:.76rem;
+          border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px;
+          padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.16));font-size:.76rem;
         }
         .or-stat-card-title{
           font-weight:650;margin-bottom:8px;font-size:.78rem;
-          padding-bottom:6px;border-bottom:1px solid rgba(127,127,127,.18);
+          padding-bottom:6px;border-bottom:1px solid var(--or-border-soft, rgba(127,127,127,.18));
         }
         .or-stat-row{
           display:flex;justify-content:space-between;align-items:baseline;gap:10px;
-          padding:5px 0;border-bottom:1px solid rgba(127,127,127,.1);
+          padding:5px 0;border-bottom:1px solid var(--or-border-faint, rgba(127,127,127,.1));
         }
         .or-stat-row:last-child{border-bottom:none;padding-bottom:0}
         .or-stat-key{opacity:.9;min-width:0;overflow:hidden;text-overflow:ellipsis}
@@ -116,7 +121,7 @@
         .or-detail-backdrop{
           position:fixed;inset:0;z-index:1300;
           display:flex;align-items:center;justify-content:center;
-          padding:16px;background:rgba(0,0,0,.72);
+          padding:16px;background:var(--or-backdrop, rgba(0,0,0,.72));
         }
         .or-detail-backdrop[hidden]{display:none!important}
         .or-img-lightbox{
@@ -132,26 +137,26 @@
         }
         .or-detail-modal{
           width:min(96vw,920px);max-height:90vh;overflow:auto;
-          background:var(--card-bg,#121726);color:inherit;
-          border:1px solid rgba(127,127,127,.35);border-radius:10px;
-          padding:14px 16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.45);
+          background:var(--or-modal-bg, var(--card-bg, #121726));color:var(--or-text, inherit);
+          border:1px solid var(--or-border, rgba(127,127,127,.35));border-radius:10px;
+          padding:14px 16px 18px;box-shadow:var(--or-modal-shadow, 0 12px 40px rgba(0,0,0,.45));
         }
         .or-detail-modal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
-        .or-detail-modal-head h3{margin:0;margin-right:auto;font-size:.95rem}
+        .or-detail-modal-head h3{margin:0;margin-right:auto;font-size:.95rem;color:var(--or-title, inherit)}
         .or-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 12px;font-size:.76rem;margin-bottom:8px}
         .or-detail-images{
           display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
           gap:10px;margin:10px 0 4px;
         }
         .or-detail-img-cell{
-          min-width:0;border:1px solid rgba(127,127,127,.25);border-radius:8px;
+          min-width:0;border:1px solid var(--or-border-soft, rgba(127,127,127,.25));border-radius:8px;
           padding:8px;display:flex;flex-direction:column;gap:6px;
-          background:rgba(0,0,0,.18);
+          background:var(--or-tile-bg, rgba(0,0,0,.18));
         }
         .or-detail-img-label{font-size:.72rem;opacity:.85;font-weight:600}
         .or-detail-img-thumb{
           width:100%;max-height:280px;object-fit:contain;
-          border-radius:6px;cursor:zoom-in;background:rgba(0,0,0,.25);
+          border-radius:6px;cursor:zoom-in;background:var(--or-img-bg, rgba(0,0,0,.25));
         }
         .or-detail-img-miss{
           min-height:120px;display:flex;align-items:center;justify-content:center;
@@ -159,8 +164,8 @@
         }
         .or-slot-thumb{
           display:block;margin-top:6px;max-width:160px;max-height:90px;
-          object-fit:contain;border-radius:4px;border:1px solid rgba(127,127,127,.3);
-          background:rgba(0,0,0,.2);cursor:zoom-in;
+          object-fit:contain;border-radius:4px;border:1px solid var(--or-border, rgba(127,127,127,.3));
+          background:var(--or-img-bg, rgba(0,0,0,.2));cursor:zoom-in;
         }
         @media (max-width:900px){
           .or-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@@ -403,4 +408,4 @@
     </section>
 </div>
 
-<script src="/static/options_review.js?v=21"></script>
+<script src="/static/options_review.js?v=22"></script>