[BUG] Plan preview: inline code has poor color contrast on certain VS Code themes
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
In the VS Code extension's plan preview webview, inline code (backtick-wrapped text) has very poor
color contrast, making it nearly unreadable. This affects both "Default High Contrast Light" and
"Default High Contrast" (dark) themes.
The root cause: the plan preview HTML template's CSS for code elements does not set an explicit color property. It only sets background: var(--vscode-textCodeBlock-background) and inherits
text color from body's var(--vscode-editor-foreground). In High Contrast themes, this
combination produces text that blends into the background.
The affected CSS in the plan preview webview template (embedded in extension.js):
```
code {
font-family: var(--vscode-editor-font-family);
font-size: var(--vscode-editor-font-size, 13px);
background: var(--vscode-textCodeBlock-background);
padding: 2px 4px;
border-radius: 3px;
/ missing: color property /
}
### What Should Happen?
Inline code in the plan preview should be clearly readable on all VS Code themes. Adding an
explicit color using VS Code's theme-aware variable would fix this:
color: var(--vscode-textPreformat-foreground, var(--vscode-editor-foreground));
`--vscode-textPreformat-foreground` is VS Code's standard token for inline preformatted text and
is designed to contrast well with `--vscode-textCodeBlock-background` across all themes.
### Error Messages/Logs
```shell
Steps to Reproduce
- Open VS Code and set the color theme to "Default High Contrast Light"
(also reproducible with "Default High Contrast" dark theme)
- Open Claude Code in the sidebar/panel
- Set permission mode to "Plan" and start a conversation
- Wait for Claude to generate a plan containing inline code
- When the plan preview tab opens, observe the inline code blocks — the text is nearly
invisible against its background due to insufficient color contrast
Claude Model
Not sure / Multiple models
Is this a regression?
I don't know
Last Working Version
_No response_
Claude Code Version
2.1.109
Platform
Anthropic API
Operating System
macOS
Terminal/Shell
VS Code integrated terminal
Additional Information
Affected VS Code themes (confirmed):
- Default High Contrast Light
- Default High Contrast (dark)
Likely affected: any theme where --vscode-editor-foreground has low contrast against --vscode-textCodeBlock-background.
Workaround: users can add to their VS Code settings.json:
"workbench.colorCustomizations": {
"[Default High Contrast Light]": {
"textPreformat.foreground": "#1a1a1a",
"textCodeBlock.background": "#e0e0e0"
}
}
But this should be fixed at the source by adding a color property to the plan preview's
inline code CSS.
This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗