[BUG] Sidebar inline diff (Monaco) hardcoded to vs-dark, ignores workbench light theme

Resolved 💬 3 comments Opened May 1, 2026 by ChenZhouUC Closed May 2, 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?

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

  1. Set VS Code to any light color theme (e.g. Default Light+).
  2. Open the Claude Code sidebar and trigger any code edit so an inline diff

is rendered.

  1. 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
modified-in-monaco-diff-editor ... vs-dark"
and a dark background, even
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-dark class 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

  1. Set VS Code to a light color theme (e.g. Default Light+ or

Light Modern).

  1. Open the Claude Code sidebar.
  2. Ask Claude to make any code edit so an inline diff is rendered in the

sidebar.

  1. 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.

  1. (Optional) Open the webview devtools and inspect the diff container —

the Monaco root carries class="monaco-editor
modified-in-monaco-diff-editor ... vs-dark"
regardless of the active
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-dark class 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.

View original on GitHub ↗

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