From e1474b5c308085772ffe1c382076ba260f965977 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E9=98=BF=E6=B1=9F=28Relakkes?= =?UTF-8?q?=29?= Date: Tue, 28 Apr 2026 12:41:56 +0800 Subject: [PATCH] Improve dark model selection contrast The model selector reused the light-theme primary fixed surface for selected rows, which made dark mode render a pale block with poor text contrast. This gives the selector its own selected-row tokens so dark mode can keep a low-luminance surface while light mode preserves the existing look. Constraint: Keep the fix scoped to desktop theme tokens and the existing selector component Rejected: Change primary-fixed globally | too broad because other components rely on that token semantics Confidence: high Scope-risk: narrow Directive: Do not point selected model rows back to primary-fixed without checking dark-mode contrast Tested: cd desktop && bun run lint Tested: cd desktop && bun run build Tested: git diff --check Not-tested: Browser screenshot capture blocked by an existing Chrome DevTools profile instance --- desktop/src/components/controls/ModelSelector.tsx | 4 ++-- desktop/src/theme/globals.css | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/desktop/src/components/controls/ModelSelector.tsx b/desktop/src/components/controls/ModelSelector.tsx index 8775478a..730ba1e7 100644 --- a/desktop/src/components/controls/ModelSelector.tsx +++ b/desktop/src/components/controls/ModelSelector.tsx @@ -278,7 +278,7 @@ export function ModelSelector({ className={` w-full rounded-lg border px-3 py-2.5 text-left transition-colors ${isSelected - ? 'border-[var(--color-brand)]/20 bg-[var(--color-primary-fixed)]' + ? 'border-[var(--color-model-option-selected-border)] bg-[var(--color-model-option-selected-bg)]' : 'border-transparent hover:bg-[var(--color-surface-hover)]' } `} @@ -328,7 +328,7 @@ export function ModelSelector({ className={` w-full rounded-lg px-3 py-2.5 text-left transition-colors ${isSelected - ? 'bg-[var(--color-primary-fixed)] border border-[var(--color-brand)]/20' + ? 'border border-[var(--color-model-option-selected-border)] bg-[var(--color-model-option-selected-bg)]' : 'hover:bg-[var(--color-surface-hover)]' } `} diff --git a/desktop/src/theme/globals.css b/desktop/src/theme/globals.css index a9c4c085..f73540e9 100644 --- a/desktop/src/theme/globals.css +++ b/desktop/src/theme/globals.css @@ -173,6 +173,8 @@ --color-surface-sidebar: var(--color-surface-container-low); --color-surface-hover: var(--color-surface-container-high); --color-surface-selected: var(--color-surface-container); + --color-model-option-selected-bg: var(--color-primary-fixed); + --color-model-option-selected-border: rgba(143, 72, 47, 0.2); --color-sidebar-filter-bg: transparent; --color-sidebar-filter-border: rgba(218, 193, 186, 0.92); --color-sidebar-filter-icon-bg: transparent; @@ -317,6 +319,8 @@ --color-surface-sidebar: #171615; --color-surface-hover: var(--color-surface-container-highest); --color-surface-selected: var(--color-surface-container); + --color-model-option-selected-bg: rgba(255, 181, 159, 0.13); + --color-model-option-selected-border: rgba(255, 181, 159, 0.34); --color-sidebar-filter-bg: rgba(255, 255, 255, 0.01); --color-sidebar-filter-border: rgba(255, 255, 255, 0.08); --color-sidebar-filter-icon-bg: transparent;