有没有一种方法可以正确地使非文本主题的Webview内容亮/暗? VS Code会自动设置我的webview html body 的样式以反映明暗变化,但这仅适用于文本或表格的前景色/背景色等,不适用于按钮的svg图像。
请注意相关问题
Detect light/dark theme programatically in Visual Studio Code远非来自<body class="vscode-light|dark|high-contrast">
的自定义Webview内容样式。
考虑使用webview,该Webview显示一个用作可点击按钮的图标:
<img src="images/light/chevron-up.svg" onclick="expandView()"/>
问题:当用户更改主题时,/light/
目录需要替换为/dark/
。
从理论上讲,我可以使用表示当前主题的src
来构造此document.body.class
属性,但是我不能,因为必须使用{{1}创建src
属性} API分配给Webview.asWebviewUri(...)
作为静态html源。
从理论上讲,我可以进行script running in the Webview to detect和webview.html
的更改(由用户稍后切换主题引起),并在用户更改主题时重新应用新主题。但这行不通,因为在Webview中运行时,相同的document.body.class
属性在运行时img.src
中。因此,我不能只替换Uri中的主题文件夹。
更新:
我只发现了一个笨拙的解决方案:将每个图标定义两次,使用自定义undefined
xml属性,并使用脚本在主题更改时显示/隐藏正确的图标:
theme
出于可维护性原因,复制是不希望的。那是我用完所有选项的地方。有什么想法吗?