[BUG] Plan preview: inline code has poor color contrast on certain VS Code themes

Resolved 💬 1 comment Opened Apr 16, 2026 by eastkiki Closed May 25, 2026

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

  1. Open VS Code and set the color theme to "Default High Contrast Light"

(also reproducible with "Default High Contrast" dark theme)

  1. Open Claude Code in the sidebar/panel
  2. Set permission mode to "Plan" and start a conversation
  3. Wait for Claude to generate a plan containing inline code
  4. 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.

View original on GitHub ↗

This issue has 1 comment on GitHub. Read the full discussion on GitHub ↗