9

我正在开发一个可以预览美人鱼图的 Visual Studio Code扩展：

在此处输入图像描述

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

在此处输入图像描述

是否可以以编程方式检测活动主题类型（例如浅色/深色），以便我可以为每种情况提供不同的样式表？

我想使用捆绑在美人鱼中的样式表，而不是在我的扩展中制作完全不同的样式表。

4

3 回答 3

11

Visual Studio Code 1.3添加了这个特性：

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

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

于 2016-09-09T18:21:24.227 回答
0

自从回答了这个问题后，HTML 预览功能被弃用，取而代之的是 Webview。这是文档的相关部分：Theming Webview content。弗拉德的回答仍然有效，但我发现它不完整。

您的Webview中自定义html内容的样式表确实需要document.body.class考虑，但是除了在页面加载时读取属性值之外，您还需要处理事件，当用户在您的Webview之后更改主题时已经加载。所以 Vald 的回答很有帮助，但我意识到我需要处理动态主题更改案例。它通常发生在我在大屏幕上演示时，人们要求我切换主题以确保清晰，然后我被主题混淆且难以辨认的 Webview 卡住了。

这是有帮助的：

html 代码在加载完成时需要触发一个onLoad()javascript 函数，并且它应该假定一个默认主题（因此 HTML 可以在 Webview 之外进行测试）。

<body onload="onLoad()" class="vscode-light">

然后 javascriptonLoad()函数需要读取 的初始值document.body.className并使用MutationObserver.

var theme = 'unknown';

function onLoad() {
    postCommand('onload');
    applyTheme(document.body.className);

    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutationRecord) {
            applyTheme(mutationRecord.target.className);
        });    
    });

    var target = document.body;
    observer.observe(target, { attributes : true, attributeFilter : ['class'] });
}

function applyTheme(newTheme) {
    var prefix = 'vscode-';
    if (newTheme.startsWith(prefix)) {
        // strip prefix
        newTheme = newTheme.substr(prefix.length);
    }

    if (newTheme === 'high-contrast') {
        newTheme = 'dark'; // the high-contrast theme seems to be an extreme case of the dark theme
    }

    if (theme === newTheme) return;
    theme = newTheme;

    console.log('Applying theme: ' + newTheme);

    /* PUT YOUR CUSTOM CODE HERE */
}
于 2019-11-04T14:33:34.103 回答
0

在扩展中，您可以使用

vscode.window.activeColorTheme: ColorTheme

并且该ColorTheme.kind类型具有以下属性：

Dark

HighContrast

Light

对象上还有一个onDidChangeActiveColorTheme: Event<ColorTheme>eventListener vscode.window。

于 2021-11-29T20:14:26.013 回答