fix: use badge colors for "auto" label to improve dark theme readability#562
Merged
Conversation
Fixes #559 The 'auto' badge on tool rows in the Usage Analysis panel was using --bg-secondary / --text-muted / --border-subtle which have low contrast against dark editor backgrounds. Replace with --badge-bg / --badge-fg (mapped to VS Code's vscode-badge-background / vscode-badge-foreground tokens) which are designed to have proper contrast in both light and dark themes, and remove the border since the badge background provides sufficient visual separation. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
… contrast Badge tokens (--badge-bg/fg) resolved to low-contrast colors in some dark themes. Switch to a theme-agnostic outline style that uses --text-secondary for both the border and text color, with a transparent background. This works in all themes since the color inherits from the editor's description text, which always has sufficient contrast. Also moves the badge styling into a dedicated .auto-badge CSS class instead of inline styles. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
--text-secondary (vscode-descriptionForeground) is too dark in some dark themes. Switch to --text-primary (vscode-editor-foreground) at 55% opacity for both the border and text. VS Code guarantees the primary foreground color is always readable against the editor background, so this reliably produces visible but visually subtle badge text in any theme. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
55% opacity was still too subdued. Use full primary foreground color so the outlined badge is crisp and clearly readable in all themes. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #559
Problem
The "auto" badge shown next to automatic tool names in the Usage Analysis panel was using
--bg-secondary,--text-muted, and--border-subtleCSS variables. In dark-themed editors,--text-muted(mapped tovscode-disabledForeground) renders as a dim color against a similarly dark background, making the label hard to read.Fix
Switch to
--badge-bg/--badge-fg(mapped to VS Code'svscode-badge-background/vscode-badge-foregroundtokens). These tokens are specifically designed by VS Code to maintain proper contrast in both light and dark themes. The explicit border was also removed since the badge background provides sufficient visual separation.Before:
After: