Search code examples
visual-studio-codevscode-extensionsmermaid

Detect light/dark theme programmatically in Visual Studio Code

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

enter image description here

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:

enter image description here

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.

Solution

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