[BUG] VS Code extension diff viewer is hardcoded to Monaco "vs-dark", ignoring the editor colour theme

Status Open
Reported on v2.1.220
Maintainer reply None cached
Activity 2 comments · opened Aug 1, 2026

Environment

  • Claude Code VS Code extension: 2.1.220 (win32-x64)
  • VS Code colour theme: a light theme ("Light 2026")
  • ~/.claude/settings.json: "theme": "light"
  • Windows 11

What happens

The chat panel itself follows my light VS Code theme correctly, but every diff block rendered for an Edit/Write tool call has a dark background. The result is a dark island inside a light panel. Bash command/output blocks in the same transcript render light, so it is specific to the diff viewer.

Expected

Diff blocks follow the active VS Code colour theme, like the rest of the panel.

Why it is not a configuration problem

theme in settings.json controls the CLI's own terminal rendering, not the webview. The extension contributes no theme setting of its own (none of the 14 claudeCode.* settings relate to appearance). Reloading the window changes nothing.

Root cause, from the shipped bundle

In webview/index.js, the diff blocks are Monaco createDiffEditor instances, and both call sites pass the theme as a string literal:

createDiffEditor(el, { readOnly:true, renderSideBySide:true, /* … */
                       theme:"vs-dark", fontSize:12, lineNumbers:"off", /* … */ })

Two occurrences, both theme:"vs-dark", neither derived from anything. And in that bundle and extension.js there are:

  • zero setTheme(...) calls, so nothing overrides it after creation
  • zero references to onDidChangeActiveColorTheme, activeColorTheme, or ColorThemeKind, so the extension never learns which theme is active

By contrast the surrounding chrome styles itself from --vscode-* variables and has .vscode-light rules — which is exactly why the panel is light and the diff inside it is not.

Suggested fix

Choose the Monaco theme from vscode.window.activeColorTheme.kind at editor creation, and subscribe to onDidChangeActiveColorTheme to update it live. The bundle already contains a ColorScheme → vs / vs-dark / hc-black / hc-light mapper, so most of the plumbing exists; it just is not wired to the host theme.

Related

  • #56141 — same symptom, closed as not planned, no cause identified
  • #8879 — standing request for code blocks to respect the editor theme
  • #65279 — worse-contrast variant (white on light grey) in the plan window

Scoped deliberately to the diff viewer, which is what I verified. Fenced code block styling (#64968, #18738) may be a separate path.

Note: the observations above are read off the shipped minified bundle, so they are stated as what is visible there and can be checked in any 2.1.220 install. I have not instrumented the running webview to prove those two createDiffEditor call sites are the ones rendering the block in my screenshot — the inference rests on them being the only diff editors in the bundle, plus non-Monaco blocks in the same transcript rendering light.

View original on GitHub ↗

This issue has 2 comments on GitHub. Read the full discussion on GitHub ↗