Есть ли способ правильно осветить / темный контент веб-просмотра темы, который не является текстовым? VS Code автоматически устанавливает стиль моего веб-просмотра html body для отражения светлых / темных изменений, но это относится только к цветам текста или таблиц переднего плана / фона и т. Д., Но не к изображениям svg, используемым для кнопок.
Обратите внимание, что связанный с этим вопрос Программное обнаружение светлой / темной темы в коде Visual Studio идет до того, что он выводит стиль пользовательского содержимого Webview из <body class="vscode-light|dark|high-contrast">.
. веб-просмотр, который показывает значок, который действует как нажимаемая кнопка:
<img src="images/light/chevron-up.svg" onclick="expandView()"/>
Проблема: каталог /light/ необходимо заменить на /dark/, когда пользователь меняет тему.
Теоретически, я мог бы построить этот атрибут src, используя document.body.class, который указывает текущую тему, но я не могу, потому что атрибут src должен быть создан с использованием API Webview.asWebviewUri(...) перед ним. присваивается webview.html в качестве статического html-источника.
Кроме того, теоретически я мог бы запустить скрипт в Webview для обнаружения изменения document.body.class (вызванного переключением пользователемтема позже) и повторно примените новую тему, когда пользователь изменит ее. Но это не сработает, потому что тот же атрибут img.src находится во время выполнения undefined, при запуске внутри Webview. Поэтому я не могу просто заменить папку темы в Uri.
Обновление: Я нашел только неуклюжее решение: дважды определить каждый значок, использовать пользовательский атрибут theme xml и использовать скрипт, чтобы показать / скрыть правильные значки при изменении темы:
<img src="images/light/chevron-up.svg" theme="light" onclick="expandView()" style="display: inherit"/>
<img src="images/dark/chevron-up.svg" theme="dark" onclick="expandView()" style="dispay: none"/>
Дублирование нежелательно по причинам ремонтопригодности. Вот где у меня кончились варианты. Есть идеи?