在VS Code Webview中使用明/暗主题图标

时间:2019-11-04 14:41:27

标签: vscode-extensions

有没有一种方法可以正确地使非文本主题的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 detectwebview.html的更改(由用户稍后切换主题引起),并在用户更改主题时重新应用新主题。但这行不通,因为在Webview中运行时,相同的document.body.class属性在运行时img.src中。因此,我不能只替换Uri中的主题文件夹。

更新: 我只发现了一个笨拙的解决方案:将每个图标定义两次,使用自定义undefined xml属性,并使用脚本在主题更改时显示/隐藏正确的图标:

theme

出于可维护性原因,复制是不希望的。那是我用完所有选项的地方。有什么想法吗?

0 个答案:

没有答案