Visual Studio Code 1.3添加了此功能:

在预览html时，我们通过暴露当前主题的样式body 元素的类名.那些是 vscode-light、vscode-dark、和 vscode-high-contrast.

使用 JavaScript 检查这些值之一允许自定义预览样式表以匹配编辑器中的活动主题.

I'm developing a Visual Studio Code extension that enables previewing mermaid diagrams:

The extension uses a default stylesheet that works fine if using the light theme. However, if the user has switched Visual Studio Code to use the dark theme, the stylesheet has some rules that are not compatible with the default dark stylesheet:

Is is possible to detect programmatically the active theme type (e.g. light/dark) so that I could provide a different stylesheet for each case?

I would like to use the stylesheets bundled in mermaid and not craft completely different ones in my extension.

Visual Studio Code 1.3 added this feature:

When previewing html, we expose the style of the current theme via class names of the body element. Those are vscode-light, vscode-dark, and vscode-high-contrast.

Inspecting for one of these values using JavaScript allows customisation of the preview stylesheet to match the active theme in the editor.