如何为现有VS Code颜色主题应用自定义token颜色修改

问题根源 #

你的核心错误是语法高亮token的配置放错了位置：workbench.colorCustomizations 仅用于自定义VS Code工作台UI元素（比如活动栏、侧边栏颜色），不支持代码token相关的属性，所以才会报Property entity.name.function.member is not allowed的错误。

正确配置方案 #

• 区分两类配置的作用域
  • 工作台UI颜色修改放到workbench.colorCustomizations下
  • 代码语法高亮token修改全部放到editor.tokenColorCustomizations下
• 指定仅对目标主题生效
  要复用现有Darktooth主题，只需要把针对该主题的覆盖配置写到对应主题的包裹节点里，不需要重写全量主题规则，完整示例如下：

{
  // 工作台UI自定义
  "workbench.colorCustomizations": {
    "activityBar.background": "#2a2b30",
    // 仅当使用Darktooth主题时生效的UI覆盖
    "[Darktooth]": {
      // 此处仅可填写工作台UI相关配置项
      "sideBar.background": "#272822"
    }
  },
  // 代码语法高亮自定义
  "editor.tokenColorCustomizations": {
    // 仅当使用Darktooth主题时生效的token颜色覆盖
    "[Darktooth]": {
      "comments": "#595436",
      "strings": "#D5ECE2",
      "functions": "#1ee9a5",
      "textMateRules": [
        {
          "scope": "storage.modifier.ts",
          "settings": {
            "foreground": "#FFFFFF"
          }
        },
        {
          "scope": ["entity.name.function.member", "meta.object-literal.key.js"],
          "settings": {
            "foreground": "#A1E2AA"
          }
        }
      ]
    }
  }
}

• 实现仅对当前工作区生效
  不要把以上配置写到全局的settings.json里，打开当前工作区的.vscode/settings.json文件，把上述配置粘贴进去即可，该配置只会在当前工作区加载，不会影响其他项目的编辑器样式。

配置修改完成后如果没有立即生效，可以切换一次主题再切回Darktooth，或重启VS Code即可加载配置。

内容的提问来源于stack exchange，提问作者Doyoon Lee