Menu
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.
553
In VS Code, open the Color Theme picker with File > Preferences > Color Theme. (Code > Preferences > Color Theme on macOS).
On the menu bar, select Tools > Options. In the options list, select Environment > General. In the Color theme list, choose between the default Dark theme, the Blue theme, the Blue (Extra Contrast) theme, and the Light theme. Or, choose the Use system setting option to select the theme that Windows uses.
On the menu bar, choose Tools > Options. In the options list, choose Environment > General. In the Color theme list, choose either the default Blue theme, the Light theme, the Dark theme, or the Blue (Extra Contrast) theme.
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.
156
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
