improve mode switch background color #5467
Conversation
Replace the use of `--vscode-toolbar-hoverBackground` which is a `-hoverBackground` that tends to be transperant or opacity change on some themes. Replace it with `-background` which uses solid color instead. See https://code.visualstudio.com/api/references/theme-color - Update Plan/Act mode switch colors var for better visibility across themes - Remove hover effects from switch options - Add background classes to active switch options
🦋 Changeset detectedLatest commit: 8c399e7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
Pull Request Overview
This PR addresses visibility issues with the Plan/Act mode switch background colors across different VS Code themes by replacing CSS variables that tend to be transparent with more reliable solid color variables.
- Updated Plan mode background color from
--vscode-inputValidation-warningBorderto--vscode-activityWarningBadge-background - Added Act mode background color using
--vscode-menu-selectionBackground - Removed hover effects from switch options and added Tailwind background classes for active states
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| webview-ui/src/components/chat/ChatTextArea.tsx | Updated CSS variables for mode switch colors and added Tailwind classes for active states |
| .changeset/bright-pets-tease.md | Added changeset documenting the visibility improvement |
Coverage ReportExtension CoverageBase branch: 47% PR branch: 48% ✅ Coverage increased or remained the same Webview CoverageBase branch: 17% PR branch: 17% Consider adding tests to cover your changes. Overall AssessmentPlease consider adding tests to maintain or improve coverage. Last updated: 2025-08-09T06:19:06.842800 |
Related Issue
Issue: #4557
Description
Replace the use of
hoverBackgroundandwarningBorderas background color for plan mode background as these color tend to be set as transparent or opacity change on some themes.Replaced it with
-backgroundcolor which often use solid color instead. See https://code.visualstudio.com/api/references/theme-colorBefore this change, the act mode in pale night theme does not have bg color:
Test Procedure
Switch between mode in different themes to confirm the toggle background are visible.
Type of Change
Pre-flight Checklist
npm test) and code is formatted and linted (npm run format && npm run lint)npm run changeset(required for user-facing changes)Screenshots
Pale night (see linked issue for before fix)
Dark+
Light Mordern
Additional Notes
Important
Improve mode switch background color visibility in
ChatTextArea.tsxby updating CSS variables and removing hover effects.ChatTextArea.tsxto use-backgroundcolor for better visibility across themes.SwitchOptioninChatTextArea.tsx.SwitchOptioninChatTextArea.tsx.This description was created by
for 8c399e7. You can customize this summary. It will automatically update as commits are pushed.