#13356: ui: align Thinking button active state in light theme with dark theme
app: web-ui
Cluster:
Web UI Enhancements and Fixes
## Summary
- make icon toggle buttons use a clear active style in chat controls
- apply same active-state affordance in light theme as in dark theme (accent red)
- specifically fixes the Thinking toggle so ON state is visually obvious in light mode
## Changes
- update `ui/src/styles/chat/layout.css`
- add styles for `.btn--icon.active` and `.btn--icon[aria-pressed="true"]`.
- add light-theme override with accent red border/background so state is obvious.
- ensure visual consistency by removing redundant shadow and using standard opacity for border.
## Why
Dark mode already gives a stronger active affordance. In light mode the previous style was too subtle, making the Thinking toggle look unchanged after click.
## Testing
Manual:
1. open Webchat UI
2. switch to light theme
3. toggle Thinking button in chat controls
4. verify button turns red-accent and remains clearly active
5. switch to dark theme and verify active affordance remains consistent
## Risk
Low (CSS-only, scoped to `.btn--icon` in chat layout).
<!-- greptile_comment -->
<h2>Greptile Overview</h2>
<h3>Greptile Summary</h3>
This PR updates `ui/src/styles/chat/layout.css` to make icon toggle buttons in chat controls render a clear “active” state, using both `.active` and `aria-pressed="true"` selectors. It also adds a light-theme override so the active border uses a subtle `color-mix()` against the theme background, keeping the active affordance consistent with dark theme while remaining readable in light mode.
Changes are scoped to `.chat-controls .btn--icon` and reuse existing theme variables (`--accent`, `--accent-subtle`, `--bg`).
<h3>Confidence Score: 5/5</h3>
- This PR looks safe to merge with minimal risk.
- The change is CSS-only, narrowly scoped to `.chat-controls .btn--icon` active states, and relies on existing theme variables and selectors already used throughout the UI. I didn’t find any definite correctness or cross-theme regressions introduced by the diff.
- No files require special attention
<!-- greptile_other_comments_section -->
**Context used:**
- Context from `dashboard` - CLAUDE.md ([source](https://app.greptile.com/review/custom-context?memory=fd949e91-5c3a-4ab5-90a1-cbe184fd6ce8))
- Context from `dashboard` - AGENTS.md ([source](https://app.greptile.com/review/custom-context?memory=0d0c8278-ef8e-4d6c-ab21-f5527e322f13))
<!-- /greptile_comment -->
## AI-assisted disclosure
- [x] Mark as AI-assisted in the PR title or description
- [x] Note the degree of testing (lightly tested)
- [x] Include prompts or session logs if possible
- [x] Confirm you understand what the code does
**Testing degree:** Lightly tested (manual UI verification in light/dark themes).
**Prompt/session log (summary):**
- "Improve chat control icon active-state visibility in light theme without changing behavior outside scope."
- "Keep the change CSS-only and verify Thinking toggle ON/OFF affordance manually in both themes."
**Confirmation:** I reviewed the final diff and understand exactly what styling behavior this PR changes.
Most Similar PRs
#11527: feat(control-ui): UX improvements — Enter key, thinking icon, auto-...
by Annaxiebot · 2026-02-07
75.7%
#12079: TUI: improve thinking UX, tool readability, and live running status...
by rubenfb23 · 2026-02-08
74.7%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
74.6%
#11010: fix(control-ui): hide tool call cards when thinking toggle is off
by Annaxiebot · 2026-02-07
73.3%
#13548: feat(control-ui): Add quote reply and send message to session features
by Annaxiebot · 2026-02-10
72.8%
#23073: fix(ui): strip reply directive tags from assistant messages in WebC...
by x4v13r1120 · 2026-02-22
72.4%
#23778: feat: chat UI facelift — speech, themes, config categories, and polish
by BunsDev · 2026-02-22
72.4%
#20317: feat(webchat): add toggle to hide tool calls and thinking blocks
by nmccready · 2026-02-18
72.3%
#17448: ui: make tool cards collapsible with inline expansion
by karimStekelenburg · 2026-02-15
71.6%
#11708: feat(ui): add Delete Session button to /chat page
by andrii-solokh · 2026-02-08
71.6%