[Bug] DiffEditor: `--vscode-*` CSS variables stop being applied after renderer recovery / long-running session (styles break, setTheme no longer restores them)

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• Not reproducible in the monaco editor playground

Monaco Editor Playground Link

No response

Monaco Editor Playground Code

Reproduction Steps

1. Create a DiffEditor using:

monaco.editor.createDiffEditor(container, options)

2. Define and apply a theme:

monaco.editor.defineTheme('custom', { ... });
monaco.editor.setTheme('custom');

3. Let the app run for a long time or simulate a renderer error followed by client-side recovery (error boundary, soft reload, SPA navigation).

4. Inspect CSS variables on :root.

Actual (Problematic) Behavior

After the renderer recovers or after long uptime:

• Certain required CSS variables are no longer set, e.g.:

  • --vscode-editor-background
  • --vscode-editorGhostText-foreground
  • --vscode-scrollbarSlider-background
  • --vscode-scrollbar-shadow

• The CSS rules are still present, but var(--vscode-*) resolves to empty.

• DiffEditor UI becomes partially broken:

  • invisible overview ruler slider
  • missing shadows / borders between panes
  • incorrect background / foreground colors

Example from DevTools:

background: var(--vscode-scrollbarSlider-background); /* variable not set */

Important: setTheme() no longer works

Even when calling:

monaco.editor.setTheme('custom');

the missing --vscode-* variables are not re-injected into the DOM.

Logging confirms that after setTheme():

• CSS rules exist
• but computed values for --vscode-* variables remain empty

At this point, the only reliable recovery is a full renderer reload.

Expected Behavior

Calling monaco.editor.setTheme() (or re-defining the theme) should ensure that all required --vscode-* CSS variables are present, even after DOM changes, renderer recovery, or long-running sessions.

Additional Context

We are encountering a recurring issue where Monaco DiffEditor loses required --vscode-* CSS variables, causing broken styling, and calling setTheme() does not restore them.

This issue appears:

after a renderer crash + recovery (e.g. error boundary / client-side reload in an SPA / Electron app), or

after the app has been running for a long time (hours), without an explicit crash

Once this happens, DiffEditor styles are partially broken and remain broken until a full page / renderer reload.

Environment

• Monaco Editor: latest (also reproducible on earlier versions)
• Usage: monaco.editor.createDiffEditor
• Framework: SPA (React), Electron renderer (long-lived process)
• Bundler: Vite (but this does not appear to be bundler-specific)
• Custom theme defined via monaco.editor.defineTheme

The symptoms are very similar to:

https://github.com/microsoft/monaco-editor/issues/4051

(missing --vscode-* vars causing broken DiffEditor UI)

This seems related to Monaco’s global theme service lifecycle:

after a DOM reset or renderer recovery, the theme service appears to believe the theme is already applied and does not re-inject variables.

Start by reproducing the issue with createDiffEditor, defineTheme, and setTheme, then inspect the CSS variables on :root before and after a DOM reset or renderer recovery. Done means calling setTheme restores the required --vscode-* variables and the DiffEditor styling remains intact without a full renderer reload.