[BUG] Sidebar inline diff (Monaco) hardcoded to vs-dark, ignores workbench light theme
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?
Summary
The inline diff renderer in the Claude Code VS Code sidebar uses a Monaco
editor instance whose theme is hardcoded to vs-dark. As a result, the diff
view shows a dark background and dark-theme syntax colors regardless of the
user's active VS Code color theme, producing a jarring contrast for users on
a light workbench theme.
Environment
- OS: macOS <version>
- VS Code: <Help → About → version + commit>
- Claude Code extension: <version>
- Active VS Code color theme: <e.g. Default Light+ / Light Modern>
Steps to reproduce
- Set VS Code to any light color theme (e.g.
Default Light+). - Open the Claude Code sidebar and trigger any code edit so an inline diff
is rendered.
- Inspect the diff container via the webview devtools.
Expected
The inline diff respects (or at least follows the light/dark polarity of)
the active workbench theme — background, gutter, and token colors should
not visually clash with the rest of the editor.
Actual
The Monaco container is rendered with class="monaco-editor and a dark background, even
modified-in-monaco-diff-editor ... vs-dark"
when the workbench theme is light. Standard user overrides
(workbench.colorCustomizations, editor.background, diffEditor.*
tokens) do not affect it because the Monaco instance lives inside the
extension's webview and its theme is fixed.
Additional notes
- Confirmed via webview devtools: the
vs-darkclass is applied
unconditionally on the Monaco root, independent of
window.matchMedia('(prefers-color-scheme)') and of the VS Code theme
kind exposed to webviews.
- A minimal fix would be to select the Monaco theme based on
ColorThemeKind (or the vscode-light / vscode-dark body class
available inside webviews) at editor construction time, and re-apply on
onDidChangeActiveColorTheme.
- Happy to provide a screen recording or extension logs if useful.
<img width="904" height="1116" alt="Image" src="https://github.com/user-attachments/assets/5e4f2953-136a-4d62-bcd1-742b7658711c" />
What Should Happen?
The inline diff rendered in the Claude Code sidebar should respect — or at
least follow the light/dark polarity of — the user's active VS Code color
theme. When the workbench is set to a light theme (e.g. Default Light+),
the diff's background, gutter, and syntax token colors should not be
forced to a dark palette.
A reasonable fix is to pick the Monaco theme at editor construction time
based on the VS Code theme kind (light/dark/high-contrast) exposed to the
webview, and update it on onDidChangeActiveColorTheme.
Error Messages/Logs
Steps to Reproduce
- Set VS Code to a light color theme (e.g.
Default Light+or
Light Modern).
- Open the Claude Code sidebar.
- Ask Claude to make any code edit so an inline diff is rendered in the
sidebar.
- Observe that the diff is shown on a dark background with dark-theme
syntax colors, contrasting sharply with the rest of the light-themed
editor.
- (Optional) Open the webview devtools and inspect the diff container —
the Monaco root carries class="monaco-editor regardless of the active
modified-in-monaco-diff-editor ... vs-dark"
workbench theme. Setting workbench.colorCustomizations /
editor.background / diffEditor.* in user settings has no effect.
Claude Model
None
Is this a regression?
No, this never worked
Last Working Version
_No response_
Claude Code Version
Claude Code for VS Code 2.1.126
Platform
Other
Operating System
macOS
Terminal/Shell
Other
Additional Information
- Confirmed via webview devtools: the
vs-darkclass is applied
unconditionally on the Monaco root, independent of
window.matchMedia('(prefers-color-scheme)') and of the VS Code theme
kind exposed to webviews.
- A minimal fix would be to select the Monaco theme based on
ColorThemeKind (or the vscode-light / vscode-dark body class
available inside webviews) at editor construction time, and re-apply on
onDidChangeActiveColorTheme.
- Happy to provide a screen recording or extension logs if useful.
This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗