Skip to content

Fix #11263: Make Edit Configurations UI fully theme-aware in custom themes - #14692

Open
Prashant Kumar Rai (8prashant) wants to merge 1 commit into
microsoft:mainfrom
8prashant:fix/11263-edit-config-ui-theming
Open

Fix #11263: Make Edit Configurations UI fully theme-aware in custom themes#14692
Prashant Kumar Rai (8prashant) wants to merge 1 commit into
microsoft:mainfrom
8prashant:fix/11263-edit-config-ui-theming

Conversation

@8prashant

Copy link
Copy Markdown

This PR fixes theming issues in the C/C++ Edit Configurations UI so it renders correctly with custom themes such as Bearded Theme.

Fixes #11263

Problem

The Edit Configurations UI had incomplete theming behavior:

  • Some colors were hardcoded, which caused poor contrast and mismatched visuals in custom themes.
  • The editable select area could appear visually incorrect in certain theme combinations.

Fix

  • Added consistent theme-variable usage for foreground, background, input, and dropdown styling.
  • Replaced hardcoded colors in key themed sections with VS Code theme tokens.
  • Improved editable select rendering behavior for theme consistency.

Validation

  • Compared pre-fix and post-fix UI rendering using the same dark-theme token set.
  • Verified before/after screenshots for top area and full page.

Screenshots

Before

Top area:
before-top

Full page:
before-full

After

Top area:
after-top

Full page:
after-full

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the Edit Configurations webview to better follow VS Code theme colors.

Changes:

  • Adds reusable theme-token fallbacks.
  • Themes editable selects, page backgrounds, code blocks, and links.

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment on lines 405 to +406
.vscode-light a {
color: #4080D0
color: var(--vscode-textLink-foreground)
Comment on lines +12 to +14
--cpptools-input-foreground: var(--vscode-settings-textInputForeground, var(--vscode-input-foreground));
--cpptools-input-background: var(--vscode-settings-textInputBackground, var(--vscode-input-background));
--cpptools-input-border: var(--vscode-settings-textInputBorder, var(--vscode-input-border));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Pull Request

Development

Successfully merging this pull request may close these issues.

Edit Configurations UI not fully themed with "Bearded Theme Extension"

3 participants