[BUG] Dark on dark when using Light theme (unreadable text)

[ryancu7]

Problem (one or two sentences)

Lots of places in the extension has dark text or dark icon on top of dark background (e.g. when item is selected), making these things unreadable.

Context (who is affected and when)

My VS Code color theme is "Visual Studio Light - C++"

Reproduction steps

1. Set VS Code to a light theme.
2. Install Roo Code extension.
3. Try to use it.

Expected result

It should look nice.

Actual result

It looks ugly and is unusable.

Variations tried (optional)

No response

App Version

3.41.3 (23717fb)

API Provider (optional)

None

Model Used (optional)

No response

Roo Code Task Links (optional)

No response

Relevant logs or errors (optional)

[roomote]

I've analyzed this issue and here's my proposed implementation plan:

Root Cause

Multiple UI components use hardcoded rgba(255,255,255,X) values for hover, active, and border states. These white-based overlays are designed for dark themes and don't provide proper contrast on light themes.

Affected Components

The following components need to be updated:

1. webview-ui/src/components/chat/ModeSelector.tsx - trigger button borders/hover
2. webview-ui/src/components/chat/ApiConfigSelector.tsx - trigger button borders/hover
3. webview-ui/src/components/chat/AutoApproveDropdown.tsx - trigger button borders/hover
4. webview-ui/src/components/chat/IconButton.tsx - hover and active states
5. webview-ui/src/components/chat/LucideIconButton.tsx - hover and active states
6. webview-ui/src/components/chat/ChatTextArea.tsx - multiple icon buttons
7. webview-ui/src/components/chat/TaskHeader.tsx - browser session button
8. webview-ui/src/components/chat/IndexingStatusBadge.tsx - hover states
9. webview-ui/src/components/ui/select-dropdown.tsx - trigger borders/hover

Proposed Solution

Replace the hardcoded rgba values with VSCode theme-aware CSS variables:

Current Pattern	Replacement
border-[rgba(255,255,255,0.08)]	border-vscode-editorGroup-border
hover:bg-[rgba(255,255,255,0.03)]	hover:bg-vscode-toolbar-hoverBackground
hover:border-[rgba(255,255,255,0.15)]	hover:border-vscode-focusBorder/50
active:bg-[rgba(255,255,255,0.1)]	active:bg-vscode-toolbar-hoverBackground

This approach uses VSCode's built-in theme variables that automatically adjust for both light and dark themes. Some components already use hover:bg-vscode-toolbar-hoverBackground correctly (e.g., common/IconButton.tsx, common/TabButton.tsx), so this change will align the codebase with an established pattern.

Secondary Issues (Out of Scope for Initial Fix)

• MermaidBlock.tsx has a completely hardcoded dark theme
• UpdateTodoListToolBlock.tsx has hardcoded colors for modal/buttons

These would require more extensive changes and could be addressed in follow-up PRs if desired.

Please mention @roomote in a comment saying that you approve this plan, and I'll proceed with the implementation.