跳到主要内容

主题色为什么要用编辑器变量？

结论​

颜色要写成 var(--vscode-...)，让网页视图、树和状态栏跟着当前主题走。写死亮色或暗色，用户一换主题就会看不清。

展开​

编辑器把主题令牌映射成 CSS 变量，例如：

  • --vscode-editor-background
  • --vscode-editor-foreground
  • --vscode-button-background
  • --vscode-focusBorder
  • --vscode-font-family

网页里：

body {
  background: var(--vscode-editor-background);
  color: var(--vscode-editor-foreground);
  font-family: var(--vscode-font-family);
}

高对比度主题不只是黑白反转，边框和焦点色都会变。用语义变量，高对比度才还过得去。

图标优先用 Codicon，它会跟着主题色。自己画 SVG 时，用 currentColor 而不是填一个十六进制。

树和状态栏不用你设颜色，编辑器会处理。非要指定装饰色时，用 ThemeColor，例如 new vscode.ThemeColor("errorForeground")，不要传 "#ff0000"。

如果产品必须有自己的品牌色，至少保证文字和背景的对比在暗色和亮色下都成立，并提供另一套变量，而不是只在自己的显示器上调一次。

容易讲错的点​

  • 网页视图里没有自动套用编辑器字体和背景，不写变量就是一张白纸黑字或反过来。
  • 变量名以当前文档为准，不要凭记忆造一个不存在的 --vscode-bg。
  • 截图验收要至少看一次暗色和一次亮色。只看默认暗色会把浅色主题里的白字漏掉。