From 448e87a84d7a013a6b3a9dd912b1afc1a6310fc9 Mon Sep 17 00:00:00 2001
From: Alex AN <anyangsen@hotmail.com>
Date: Wed, 28 Jan 2026 12:57:58 +0800
Subject: [PATCH] fix(ui): improve active button contrast in light mode (#2832)

The thinking toggle (and other icon buttons) in the dashboard chat view
are visually identical in on/off states when using light mode.

Root cause: the light-mode .btn--icon rule sets background to near-white
(rgba 255,255,255,0.9) which has higher specificity than the generic
.btn.active orange tint (rgba 245,159,74,0.12), making the active state
invisible.

Fix:
1. Add :root[data-theme='light'] .btn--icon.active with explicit orange
   background + border to override the white .btn--icon base.
2. Strengthen :root[data-theme='light'] .btn.active with border-color
   so all button active states (not only icon buttons) are distinguishable
   in light mode.

Closes #2832
---
 ui/src/styles/chat/layout.css | 9 +++++++++
 ui/src/styles/components.css  | 5 +++++
 2 files changed, 14 insertions(+)

diff --git a/ui/src/styles/chat/layout.css b/ui/src/styles/chat/layout.css
index 589b0b62d..bea14a243 100644
--- a/ui/src/styles/chat/layout.css
+++ b/ui/src/styles/chat/layout.css
@@ -344,6 +344,15 @@
   color: var(--text);
 }
 
+/* Active state for icon buttons in light mode — without this override the
+   white .btn--icon background (specificity) masks the generic .btn.active
+   orange tint, making on/off states visually identical.  See #2832. */
+:root[data-theme="light"] .btn--icon.active {
+  background: rgba(245, 159, 74, 0.18);
+  border-color: rgba(245, 159, 74, 0.5);
+  color: rgba(16, 24, 40, 0.9);
+}
+
 .btn--icon svg {
   display: block;
   width: 18px;
diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index 27dfe62d1..2e227e4f6 100644
--- a/ui/src/styles/components.css
+++ b/ui/src/styles/components.css
@@ -510,6 +510,11 @@
   border-color: var(--accent);
 }
 
+:root[data-theme="light"] .btn.active {
+  background: rgba(245, 159, 74, 0.14);
+  border-color: rgba(245, 159, 74, 0.45);
+}
+
 /* ===========================================
    Utilities
    =========================================== */