From b50eebe37c8544f03d09bf4f9b9122a51485b4b2 Mon Sep 17 00:00:00 2001
From: dekun <dekun@local>
Date: Thu, 16 Jul 2026 12:00:30 +0800
Subject: [PATCH] Boost light-mode contrast on options position cards.

Darken labels, hints, and badges so call/put chips and metric text stay readable on white.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 lib/common/static/instance_theme.css    | 146 +++++++++++++++++++-----
 lib/instance/templates/embed_shell.html |   2 +-
 lib/instance/templates/index.html       |   2 +-
 manual_trading_hub/static/app.css       |  37 ++++++
 manual_trading_hub/static/index.html    |   2 +-
 5 files changed, 157 insertions(+), 32 deletions(-)

diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css
index 3d2084b..72f6cb7 100644
--- a/lib/common/static/instance_theme.css
+++ b/lib/common/static/instance_theme.css
@@ -881,11 +881,11 @@ 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;
+  color: #1e293b !important;
 }
 
 html[data-theme="light"] .pos-meta-item::after {
-  color: #b8c8d8 !important;
+  color: #94a3b8 !important;
 }
 
 .pos-time-close-meta {
@@ -971,13 +971,15 @@ html[data-theme="light"] .pos-meta-on {
 }
 
 html[data-theme="light"] .pos-side-long {
-  background: rgba(0, 110, 154, 0.12) !important;
-  color: #006e9a !important;
+  background: #006e9a !important;
+  color: #fff !important;
+  border: 1px solid #005a82 !important;
 }
 
 html[data-theme="light"] .pos-side-short {
-  background: rgba(180, 50, 50, 0.1) !important;
-  color: #b03030 !important;
+  background: #b03030 !important;
+  color: #fff !important;
+  border: 1px solid #8a2424 !important;
 }
 
 html[data-theme="light"] .pos-entrust-btn,
@@ -4706,26 +4708,89 @@ html[data-theme="light"] .pos-pnl-loss {
 }
 
 /* 期权持仓 · 亮色主题对比度 */
+html[data-theme="light"] .options-page-wrap .opt-pos-card {
+  background: #fff !important;
+  border-color: #94a3b8 !important;
+}
+
 html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-label,
 html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta,
 html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta-item {
-  color: #334155 !important;
+  color: #0f172a !important;
+  font-weight: 500 !important;
+  opacity: 1 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-meta-item::after {
-  color: #94a3b8 !important;
+  color: #64748b !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-pos-card .pos-value {
-  color: #0f172a !important;
+  color: #020617 !important;
+  font-weight: 600 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-bid-plain {
-  color: #1e3a52 !important;
+  color: #0f172a !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-close-value {
+  color: #9f1239 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-bid-invalid-hint,
+html[data-theme="light"] .options-page-wrap .opt-pos-card .muted {
+  color: #334155 !important;
+  opacity: 1 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-row {
+  border-top-color: #94a3b8 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-row-label {
+  color: #0f172a !important;
+  font-weight: 600 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-pos-target-input {
+  background: #fff !important;
+  color: #0f172a !important;
+  border-color: #64748b !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-pos-target-input::placeholder {
+  color: #64748b !important;
+  opacity: 1 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-row .btn-secondary {
+  color: #004d6e !important;
+  border-color: #007aa8 !important;
+  background: #e8f4fa !important;
+  font-weight: 600 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-armed {
+  color: #004d6e !important;
+  font-weight: 600 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-est-item .k {
+  color: #334155 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-est-item .v {
+  color: #0f172a !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-row-hint {
+  color: #334155 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-expiry-cd {
   color: #004d6e !important;
+  font-weight: 600 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-expiry-cd--urgent {
@@ -4733,60 +4798,83 @@ html[data-theme="light"] .options-page-wrap .opt-expiry-cd--urgent {
 }
 
 html[data-theme="light"] .options-page-wrap .opt-expiry-cd--expired {
-  color: #64748b !important;
+  color: #475569 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-pos-tab:not(.active) {
-  color: #334155 !important;
-  border-color: #b8c8d8 !important;
+  color: #0f172a !important;
+  border-color: #64748b !important;
   background: #fff !important;
+  font-weight: 500 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-pos-tab.active {
+  color: #003d57 !important;
+  border-color: #006e9a !important;
+  background: rgba(0, 110, 154, 0.16) !important;
+  font-weight: 700 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .options-pos-head h2,
 html[data-theme="light"] .options-page-wrap .options-pos-card-wrap h2 {
-  color: #0f172a !important;
+  color: #020617 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule {
-  border: 1px solid #b8c8d8 !important;
-  background: #eef3f8 !important;
+  border: 1px solid #64748b !important;
+  background: #e2e8f0 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule summary {
   color: #0f172a !important;
-  background: #e2eaf2 !important;
+  background: #cbd5e1 !important;
+  font-weight: 600 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule summary::after {
-  background: rgba(0, 95, 140, 0.12) !important;
-  color: #004d6e !important;
+  background: rgba(0, 95, 140, 0.18) !important;
+  color: #003d57 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule[open] summary {
-  background: #dce6f0 !important;
-  border-bottom-color: #b8c8d8 !important;
+  background: #b8c8d8 !important;
+  border-bottom-color: #64748b !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule-body {
-  color: #334155 !important;
-}
-
-html[data-theme="light"] .options-page-wrap .opt-close-rule-body p {
   color: #1e293b !important;
 }
 
+html[data-theme="light"] .options-page-wrap .opt-close-rule-body p {
+  color: #0f172a !important;
+}
+
 html[data-theme="light"] .options-page-wrap .opt-close-rule-body li {
-  color: #334155 !important;
+  color: #1e293b !important;
 }
 
 html[data-theme="light"] .options-page-wrap .opt-close-rule-body code {
-  color: #142232 !important;
+  color: #0f172a !important;
   background: #fff !important;
-  border: 1px solid #c8d4e0 !important;
+  border: 1px solid #94a3b8 !important;
 }
 
 html[data-theme="light"] .options-page-wrap .pos-empty {
-  color: #475569 !important;
+  color: #334155 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-monitors {
+  background: #1e293b !important;
+  border-color: #334155 !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-monitors-head,
+html[data-theme="light"] .options-page-wrap .opt-target-mon-inst {
+  color: #f8fafc !important;
+}
+
+html[data-theme="light"] .options-page-wrap .opt-target-mon-rule {
+  color: #7dd3fc !important;
 }
 
 html[data-theme="light"] .order-preview-profit {
diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html
index b403a05..f7c8f6f 100644
--- a/lib/instance/templates/embed_shell.html
+++ b/lib/instance/templates/embed_shell.html
@@ -7,7 +7,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=6">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=93">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=94">
     <script src="/static/account_risk_badge.js?v=4"></script>
     <meta name="theme-color" content="#0b0d14">
     <title>{{ pwa_app_name }}</title>
diff --git a/lib/instance/templates/index.html b/lib/instance/templates/index.html
index e937522..d70a07e 100644
--- a/lib/instance/templates/index.html
+++ b/lib/instance/templates/index.html
@@ -17,7 +17,7 @@
     <link rel="manifest" href="/static/icons/manifest.webmanifest">
     <title>{{ pwa_app_name }}</title>
     <link rel="stylesheet" href="/static/instance_page.css?v=3">
-    <link rel="stylesheet" href="/static/instance_theme.css?v=93">
+    <link rel="stylesheet" href="/static/instance_theme.css?v=94">
 
 </head>
 <body
diff --git a/manual_trading_hub/static/app.css b/manual_trading_hub/static/app.css
index 014e38a..b144423 100644
--- a/manual_trading_hub/static/app.css
+++ b/manual_trading_hub/static/app.css
@@ -2034,6 +2034,43 @@ body.market-chart-fs-open {
   font-weight: 600;
 }
 
+html[data-theme="light"] .hub-pos-card .pos-label {
+  color: #0f172a;
+  font-weight: 500;
+}
+
+html[data-theme="light"] .hub-pos-card .pos-meta,
+html[data-theme="light"] .hub-pos-card .pos-meta-item {
+  color: #1e293b;
+}
+
+html[data-theme="light"] .hub-pos-card .pos-value {
+  color: #020617;
+  font-weight: 600;
+}
+
+html[data-theme="light"] .hub-pos-card .pos-side-long,
+html[data-theme="light"] .hub-pos-card .pos-side-badge.side-long {
+  background: #006e9a;
+  color: #fff;
+  border-color: #005a82;
+}
+
+html[data-theme="light"] .hub-pos-card .pos-side-short,
+html[data-theme="light"] .hub-pos-card .pos-side-badge.side-short {
+  background: #b03030;
+  color: #fff;
+  border-color: #8a2424;
+}
+
+html[data-theme="light"] .hub-opt-pos-card .opt-bid-plain {
+  color: #0f172a;
+}
+
+html[data-theme="light"] .hub-opt-pos-card .opt-close-value {
+  color: #9f1239;
+}
+
 html[data-theme="light"] .hub-pos-card .pos-tp-profit {
   color: #1a8f4a;
 }
diff --git a/manual_trading_hub/static/index.html b/manual_trading_hub/static/index.html
index f075a96..ee591b7 100644
--- a/manual_trading_hub/static/index.html
+++ b/manual_trading_hub/static/index.html
@@ -15,7 +15,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'" />
   <noscript><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Orbitron:wght@500;600;700&display=swap" rel="stylesheet" /></noscript>
-      <link rel="stylesheet" href="/assets/app.css?v=20260716-funds-pnl-banner" />
+      <link rel="stylesheet" href="/assets/app.css?v=20260716-opt-light-contrast" />
   <link rel="stylesheet" href="/assets/trade_stats_calendar.css?v=4" />
   <link rel="stylesheet" href="/assets/account_risk_badge.css?v=4" />
   <script src="/assets/account_risk_badge.js?v=4"></script>