To list all webview theme variables:
- Execute VSCode without extensions:
code --disable-extensions
- Open the command palette, choose this command:
Developer: Open Webview Developer Tools
- Inspect any tag in the webview's html
- Run the following snippet in the dev console
(function () {
const mapper = (s) => {
const k = s.replace(/\./g,"\\.");
const v = document.documentElement.style.getPropertyValue(s);
const p = `${s.replace(/\./g,"\\.")}: ${document.documentElement.style.getPropertyValue(s)}`;
return ` ["${k}", "${v}"],\n`;
}
const list = Array.from(document.documentElement.style)
.sort((a, b) => a.localeCompare(b))
.filter(
(v) =>
v.indexOf("--vscode-font-family") === -1 &&
v.indexOf("--vscode-editor-font-family") === -1 &&
v.indexOf("--text-link-decoration") === -1
)
.map(mapper)
.join("");
let res = '/** @type {[string, string][]} */\n';
res += `export const theme = [\n${list}];\n`
console.log(res);
})();