在 Visual Studio Code 中以编程方式检测亮/暗主题 [英] Detect light/dark theme programmatically in Visual Studio Code

问题描述

我正在开发一个 Visual Studio Code

该扩展程序使用默认样式表，如果使用浅色主题，该样式表可以正常工作.但是，如果用户已将 Visual Studio Code 切换为使用深色主题，则样式表具有一些与默认深色样式表不兼容的规则:

是否可以通过编程方式检测活动主题类型(例如亮/暗)，以便我可以为每种情况提供不同的样式表?

我想使用 mermaid 中捆绑的样式表，而不是在我的扩展中制作完全不同的样式表.

解决方案

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.

这篇关于在 Visual Studio Code 中以编程方式检测亮/暗主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！