Detect a light / dark theme programmatically in Visual Studio Code

Question

I am developing a Visual Studio code extension that allows me to view mermaid :

The extension uses the default stylesheet, which works great when using a light theme. However, if the user switched the Visual Studio code to use a dark theme, the style sheet has some rules that are not compatible with the default stylish table:

Is it possible to programmatically determine the active type of theme (for example, light / dark) so that I can provide a different stylesheet for each case?

I would like to use the stylesheets included in the mermaid, and not create completely different ones in my extension.

Answer 1

Visual Studio Code 1.3 added this feature:

When viewing html, we show the style of the current theme through the class names of the body element. These are vscode-light , vscode-dark , and vscode-high-contrast .

Checking one of these values ​​using JavaScript allows you to customize the preview stylesheet to match the active theme in the editor.