From 606ee0fa02abe969182f9d12a9ef44b4abc5d117 Mon Sep 17 00:00:00 2001 From: Bill Date: Fri, 16 Oct 2026 20:25:35 +0800 Subject: [PATCH] =?UTF-8?q?refactor(theme):=20global/terminal=20=E7=A1=AC?= =?UTF-8?q?=E7=BC=96=E7=A0=81=E9=A2=9C=E8=89=B2=E6=94=B6=E6=95=9B=E8=BF=9B?= =?UTF-8?q?=20--ot-*=20=E8=AF=AD=E4=B9=89=E5=8F=98=E9=87=8F=EF=BC=88?= =?UTF-8?q?=E5=90=AB=E6=BB=9A=E5=8A=A8=E6=9D=A1/=E9=98=B4=E5=BD=B1/?= =?UTF-8?q?=E6=B5=AE=E5=B1=82=EF=BC=8C=E9=93=81=E5=BE=8B=E4=BE=8B=E5=A4=96?= =?UTF-8?q?=E4=BF=9D=E7=95=99=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/renderer/src/global.css | 32 ++++++++++++++++++++++---- src/renderer/src/terminal/terminal.css | 30 ++++++++++++------------ 2 files changed, 43 insertions(+), 19 deletions(-) diff --git a/src/renderer/src/global.css b/src/renderer/src/global.css index 10db1f2..5cd5ae4 100644 --- a/src/renderer/src/global.css +++ b/src/renderer/src/global.css @@ -13,6 +13,30 @@ --chrome-tab-ring-hover: rgba(255, 255, 255, 0.2); --chrome-tab-fg: #98a2ab; --chrome-tab-fg-hover: #d0d0d0; + /* Semantic layer; overwritten per theme by applyChromeTheme() via + semanticVars() — these dark values are the pre-JS fallback (and the + zero-regression dark branch). */ + --ot-text: #cccccc; + --ot-text-secondary: rgba(204, 204, 204, 0.78); + --ot-text-muted: #8a8a8a; + --ot-surface: rgba(204, 204, 204, 0.05); + --ot-surface-raised: rgba(24, 26, 31, 0.85); + --ot-hover: rgba(255, 255, 255, 0.08); + --ot-border: rgba(255, 255, 255, 0.16); + --ot-border-strong: rgba(255, 255, 255, 0.16); + --ot-success: #3fb950; + --ot-success-fg: #3fb950; + --ot-danger: #f85149; + --ot-danger-fg: #f85149; + --ot-warning: #d29922; + --ot-warning-fg: #d29922; + --ot-info: #58a6ff; + --ot-info-fg: #58a6ff; + --ot-scrollbar: rgba(125, 145, 170, 0.5); + --ot-scrollbar-active: rgba(150, 172, 200, 0.7); + --ot-shadow: rgba(0, 0, 0, 0.45); + --ot-focus-ring: rgba(59, 142, 234, 0.2); + color-scheme: dark; } html, @@ -32,7 +56,7 @@ body, tracks + arrow buttons that look broken on the dark surface. */ * { scrollbar-width: thin; - scrollbar-color: rgba(125, 145, 170, 0.5) transparent; + scrollbar-color: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)) transparent; } *::-webkit-scrollbar { @@ -45,7 +69,7 @@ body, } *::-webkit-scrollbar-thumb { - background: rgba(125, 145, 170, 0.5); + background: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)); border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; @@ -53,7 +77,7 @@ body, } *::-webkit-scrollbar-thumb:hover { - background: rgba(150, 172, 200, 0.7); + background: var(--ot-scrollbar-active, rgba(150, 172, 200, 0.7)); border: 3px solid transparent; background-clip: padding-box; } @@ -134,7 +158,7 @@ button { overflow: auto; white-space: pre-wrap; font-size: 12px; - color: #ff6b6b; + color: var(--ot-danger-fg, #ff6b6b); } .panel-error-retry { diff --git a/src/renderer/src/terminal/terminal.css b/src/renderer/src/terminal/terminal.css index d8854b6..4a8a4c2 100644 --- a/src/renderer/src/terminal/terminal.css +++ b/src/renderer/src/terminal/terminal.css @@ -40,7 +40,7 @@ so it reads as a soft slate bar, never a white line. */ .terminal-view .xterm-viewport { scrollbar-width: thin; - scrollbar-color: rgba(125, 145, 170, 0.5) transparent; + scrollbar-color: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)) transparent; } .terminal-view .xterm-viewport::-webkit-scrollbar { @@ -52,7 +52,7 @@ } .terminal-view .xterm-viewport::-webkit-scrollbar-thumb { - background: rgba(125, 145, 170, 0.5); + background: var(--ot-scrollbar, rgba(125, 145, 170, 0.5)); border: 3px solid transparent; border-radius: 6px; background-clip: padding-box; @@ -60,7 +60,7 @@ } .terminal-view .xterm-viewport::-webkit-scrollbar-thumb:hover { - background: rgba(150, 172, 200, 0.7); + background: var(--ot-scrollbar-active, rgba(150, 172, 200, 0.7)); border: 3px solid transparent; background-clip: padding-box; } @@ -147,7 +147,7 @@ border: 1px solid var(--chrome-border); border-radius: 8px; background: var(--chrome-bg-deep); - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); + box-shadow: 0 6px 20px var(--ot-shadow, rgba(0, 0, 0, 0.4)); font-size: 12px; color: var(--chrome-fg); user-select: none; @@ -210,7 +210,7 @@ gap: 2px; padding: 2px; border-radius: 6px; - background: rgba(24, 26, 31, 0.85); + background: var(--ot-surface-raised, rgba(24, 26, 31, 0.85)); border: 1px solid var(--chrome-border); /* Hidden until the terminal is hovered — it must not sit over the output. */ opacity: 0; @@ -234,14 +234,14 @@ border: none; border-radius: 4px; background: transparent; - color: #8a8a8a; + color: var(--ot-text-muted, #8a8a8a); font-size: 12px; cursor: pointer; } .term-rec-btn:hover { - color: #ffffff; - background: rgba(255, 255, 255, 0.1); + color: var(--ot-text, #ffffff); + background: var(--ot-hover, rgba(255, 255, 255, 0.1)); } .term-rec-btn.is-recording { @@ -278,7 +278,7 @@ background: var(--chrome-bg); border: 1px solid var(--chrome-border); border-radius: 8px; - box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55); + box-shadow: 0 8px 28px var(--ot-shadow, rgba(0, 0, 0, 0.55)); user-select: none; box-sizing: border-box; } @@ -308,8 +308,8 @@ .term-suggest-item:hover, .term-suggest-item.is-active { - background: rgba(59, 142, 234, 0.18); - color: #ffffff; + background: var(--ot-focus-ring, rgba(59, 142, 234, 0.18)); + color: var(--ot-text, #ffffff); } .term-suggest-cmd { @@ -327,14 +327,14 @@ line-height: 1; padding: 2px 5px; border-radius: 4px; - color: #9a9a9a; - background: rgba(255, 255, 255, 0.08); + color: var(--ot-text-muted, #9a9a9a); + background: var(--ot-hover, rgba(255, 255, 255, 0.08)); } .term-suggest-hint { flex: 0 0 auto; font-size: 11px; - color: #8a8a8a; + color: var(--ot-text-muted, #8a8a8a); opacity: 0.9; padding-top: 4px; line-height: 13px; @@ -416,7 +416,7 @@ border: none; border-radius: 4px; background: var(--chrome-accent); - color: #fff; + color: var(--tab-accent-fg, #fff); font: inherit; cursor: pointer; }