VSCODE Extension: Chat panel inline code and code blocks have no background, ignore VSCode theme tokens

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 Claude Code VSCode extension chat panel, both inline code (` foo `) and fenced code blocks render with no background fill, making them visually indistinguishable from prose. Compared to GitHub Copilot's integrated chat — which uses a clear pill for inline code and a distinct tile with border for blocks — Claude Code's chat is significantly harder to read when responses contain code.

The root cause appears to be a dead CSS variable plus hardcoded rules that don't reference any VSCode theme tokens, so users can't fix it via workbench.colorCustomizations either.

What Should Happen?

Either:

Option A — wire the existing variable to a theme token (smallest change):

.root_-a7MRw {
  --app-code-background: var(--vscode-textPreformat-background, rgba(127,127,127,.13));
  --app-code-foreground: var(--vscode-textPreformat-foreground, inherit);
  --app-code-block-background: var(--vscode-textCodeBlock-background, var(--vscode-editor-background));
  --app-code-block-border: var(--vscode-widget-border, rgba(127,127,127,.25));
}

.root_-a7MRw code {
  background: var(--app-code-background);
  color: var(--app-code-foreground);
}

.root_-a7MRw pre code {
  background: transparent;
  padding: 0;
}

.codeBlockWrapper_-a7MRw pre {
  background: var(--app-code-block-background);
  border: 1px solid var(--app-code-block-border);
  padding: 10px 12px;
}

This would make the chat respect any VSCode theme out of the box, and workbench.colorCustomizations overrides for textCodeBlock.background etc. would Just Work.

Option B — expose a setting:

claude-code.chat.codeBlockStyle: "default" | "minimal" | "github" or similar. Less ideal — option A is essentially free.

Error Messages/Logs

In `webview/index.css` (minified, single line), the relevant rules are:


.root_-a7MRw code {
  font-family: var(--app-monospace-font-family);
  word-break: break-word;
  border-radius: 3px;
  padding: 2px 4px;
  font-size: .9em;
  /* no background, no border, no color */
}

.codeBlockWrapper_-a7MRw pre {
  overflow-x: auto;
  white-space: pre;
  box-sizing: border-box;
  border-radius: 4px;
  max-width: 100%;
  margin: 0;
  padding: 8px;
  /* no background, no border */
}


Meanwhile `--app-code-background` is referenced elsewhere in the same CSS (e.g. `.toolResult_uq5aLg`) but is **never defined** anywhere in the bundled CSS or JS — it's a dead variable.

VSCode does expose `--vscode-textCodeBlock-background`, `--vscode-textPreformat-background`, `--vscode-textPreformat-foreground`, and `--vscode-widget-border` to webviews. None of them are referenced by the chat-area code rules, so users cannot work around this with `workbench.colorCustomizations`.

Steps to Reproduce

1. Install the Claude Code VSCode extension.
2. Open the chat panel (primary or secondary sidebar).
3. Ask any question that returns inline code or a fenced code block, e.g. "show me a hello world in C".
4. Observe: inline code has no background pill; the <pre> block has no background tile or border, just monospace text floating on the chat background.

Claude Model

None

Is this a regression?

I don't know

Last Working Version

_No response_

Claude Code Version

2.1.96

Platform

Anthropic API

Operating System

Other Linux

Terminal/Shell

VS Code integrated terminal

Additional Information

For a tool whose primary output is code, code rendering being hard to read is a real friction point. It's also a ~10-line CSS fix with zero behavioral risk, and it would make the chat panel respect every VSCode theme automatically rather than looking the same regardless of the user's setup.