romtuck/openclaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): improve active button contrast in light mode (#2832)

Browse Source 
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
This commit is contained in:
Alex AN 2026-01-28 12:57:58 +08:00
parent 9688454a30
commit 448e87a84d
2 changed files with 14 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/src/styles/chat/layout.css
View File

@ -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;

5
ui/src/styles/components.css
View File

@ -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
=========================================== */