← Back to PRs

#13356: ui: align Thinking button active state in light theme with dark theme

by yamoroc open 2026-02-10 11:50 View on GitHub →
app: web-ui
## 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