Обнаружение светлой / темной темы программно в коде Visual Studio

Я разрабатываю расширение кода Visual Studio, которое позволяет просматривать диаграммы русалок:

Расширение использует таблицу стилей по умолчанию, которая отлично работает при использовании светлой темы. Однако если пользователь переключил код Visual Studio на использование темной темы, таблица стилей имеет некоторые правила, которые не совместимы с таблицей стилей по умолчанию:

Можно ли программно определять тип активной темы (например, светлая / темная), чтобы я мог предоставить разные таблицы стилей для каждого случая?

Я хотел бы использовать таблицы стилей из русалки, а не создавать совсем другие в моем расширении.

Источник

3 ответа

Решение

Visual Studio Code 1.3 добавил эту функцию:

При предварительном просмотре html мы раскрываем стиль текущей темы через имена классов элемента body. Это vscode-light, vscode-dark и vscode-high-контраст.

Проверка одного из этих значений с помощью JavaScript позволяет настроить таблицу стилей предварительного просмотра в соответствии с активной темой в редакторе.

Источник

В расширении вы можете использовать

vscode.window.activeColorTheme: ColorTheme

и ColorTheme.kindтип имеет следующие свойства:

      Dark

HighContrast

Light

Существует также onDidChangeActiveColorTheme: Event<ColorTheme>прослушиватель событий на vscode.windowобъект.

Источник

Поскольку на этот вопрос был дан ответ, функция предварительного просмотра HTML устарела в пользу Webview. Вот соответствующая часть документации: Theming Webview content. Ответ Влада все еще в силе, но я нашел его неполным.

Таблица стилей настраиваемого HTML-содержимого в вашем веб-просмотре действительно должна принимать document.body.classво внимание, но помимо чтения значения атрибута при загрузке страницы, вам также необходимо обрабатывать события, когда пользователь меняет тему после того, как ваш Webview уже был загружен. Итак, ответ Валда был полезен, но я понял, что мне нужно обработать случай динамического изменения темы. Обычно это происходит, когда я выступаю на большом экране, и люди просят меня переключить тему для ясности, а затем я застреваю в Webview, который перепутан с темой и неразборчив.

Вот что помогло:

HTML-код должен запускать onLoad() javascript по завершении загрузки, и она должна принимать тему по умолчанию (так что HTML можно тестировать вне Webview).

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

Тогда javascript onLoad() функция должна прочитать начальное значение 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 */
}
Источник
Другие вопросы по тегам