Problem
When VS Code follows the operating system appearance, the WYSIWYG editor does not switch between light and dark themes even though markdownWysiwyg.colorTheme is set to "auto".
Closing and reopening the Markdown document does not help. The VS Code workbench changes to the correct appearance, while the WYSIWYG editor remains dark.
Environment
- WYSIWYG Markdown Editor: 0.3.2
- VS Code: 1.131.0 (arm64)
- macOS: 26.5.1
window.autoDetectColorScheme: true
workbench.preferredLightColorTheme: "GitHub Light Default"
workbench.preferredDarkColorTheme: "GitHub Dark Default"
markdownWysiwyg.colorTheme: "auto"
Steps to reproduce
- Set macOS appearance to Dark.
- Open a Markdown file in the WYSIWYG editor.
- Change macOS appearance to Light.
- Observe that the VS Code workbench switches to the light theme.
- Observe that the WYSIWYG editor remains dark.
- Close and reopen the Markdown document; it still remains dark.
The same issue occurs in the opposite direction.
Expected behavior
With markdownWysiwyg.colorTheme: "auto", the WYSIWYG editor should follow the currently active VS Code color theme whenever the system appearance changes.
Root cause
In MarkdownEditorProvider._getThemeColors(), the "auto" branch reads:
currentThemeLabel = vscode.workspace
.getConfiguration()
.get<string>("workbench.colorTheme");
When window.autoDetectColorScheme is enabled, VS Code changes vscode.window.activeColorTheme, but the configured workbench.colorTheme value can remain the dark theme (for example, "GitHub Dark Default").
Therefore, onDidChangeActiveColorTheme fires correctly, but applyThemeToAll() resolves and reapplies the stale configured dark theme.
Suggested fix
For "auto", use the CSS variables that VS Code already injects into the webview:
private async _getThemeColors(
themeId: string,
): Promise<Record<string, string>> {
if (themeId === "auto") {
return getAutoThemeColors();
}
// Existing custom and explicitly selected theme handling...
}
getAutoThemeColors() already returns an empty object for this purpose, and the webview's setTheme handler removes previously applied overrides before relying on the injected --vscode-* variables.
An alternative would be to resolve workbench.preferredLightColorTheme / workbench.preferredDarkColorTheme based on vscode.window.activeColorTheme.kind, but using the injected variables appears simpler and also preserves the exact active theme colors.
Problem
When VS Code follows the operating system appearance, the WYSIWYG editor does not switch between light and dark themes even though
markdownWysiwyg.colorThemeis set to"auto".Closing and reopening the Markdown document does not help. The VS Code workbench changes to the correct appearance, while the WYSIWYG editor remains dark.
Environment
window.autoDetectColorScheme:trueworkbench.preferredLightColorTheme:"GitHub Light Default"workbench.preferredDarkColorTheme:"GitHub Dark Default"markdownWysiwyg.colorTheme:"auto"Steps to reproduce
The same issue occurs in the opposite direction.
Expected behavior
With
markdownWysiwyg.colorTheme: "auto", the WYSIWYG editor should follow the currently active VS Code color theme whenever the system appearance changes.Root cause
In
MarkdownEditorProvider._getThemeColors(), the"auto"branch reads:When
window.autoDetectColorSchemeis enabled, VS Code changesvscode.window.activeColorTheme, but the configuredworkbench.colorThemevalue can remain the dark theme (for example,"GitHub Dark Default").Therefore,
onDidChangeActiveColorThemefires correctly, butapplyThemeToAll()resolves and reapplies the stale configured dark theme.Suggested fix
For
"auto", use the CSS variables that VS Code already injects into the webview:getAutoThemeColors()already returns an empty object for this purpose, and the webview'ssetThemehandler removes previously applied overrides before relying on the injected--vscode-*variables.An alternative would be to resolve
workbench.preferredLightColorTheme/workbench.preferredDarkColorThemebased onvscode.window.activeColorTheme.kind, but using the injected variables appears simpler and also preserves the exact active theme colors.