VS Code插件开发教程（6） Color Theme-一一网

Visual Studio Code用户界面中的颜色分为两类：

工作区（Workbench）颜色：用在视图和编辑器中，包含Activity Bar、Status Bar，完整的颜色清单可以在 Theme Color 查到
语法颜色：用于编辑器中的源码高亮，这部分颜色和具体的语法以及语言的token有关

本篇教程将会涉及创建颜色主题的各种方法

工作台颜色

最简单的创建工作台颜色主题的方式是从一个已有的主题出发进行自定义改造，首先在颜色主题 -> 首选项里选中一个你喜欢的颜色主题，然后打开settings.json文件，配置workbench.colorCustomizations字段，修改会实时生效。举例而言，下面这段代码将会改变title bar的颜色：

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}
复制代码

完整的颜色配置项可以在此处查询 Theme Color

语法颜色（Syntax）

有两种方式生成自己的语法颜色：

从社区一个既有的 TextMate 主题（.tmTheme文件）的基础上进行修改，这是最简单的方式，类似上文中的工作台颜色主题的方式
从零开始，自己创建语法主题

从已有的主题创建的话，首先切换到想要修改的颜色主题上，然后编辑settings.json文件，修改editor.tokenColorCustomizations字段，例如下段代码将会修改注释的颜色：

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}
复制代码

更多信息可见 Syntax Highlight Guide

语义颜色（Semantic）

语义颜色是自VS Code 1.43发布的一个新功能，是根据language service提供的符号信息对语法颜色的增强。目前仅支持TypeScript、JavaScript，之后会增加对其它语言的支持。颜色的渲染是从language service启动、计算完毕语义符号开始的。

用户可以用editor.tokenColorCustomizations字段覆盖制定主题的语义高亮：

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
}
复制代码

更多的信息参见 Syntax Highlight Guide

创建一个颜色主题

通过Command Palette执行Developer: Generate Color Theme from Current Settings命令，以现有的主题为基础创建主题文件

用generator-code创建一个主题拓展

npm install -g yo generator-code
yo code
复制代码

选择Start fresh
拷贝主题文件到生成的插件项目里

你可以在使用generator-code的时候导入一个已经存在的 TextMate 主题（.tmTheme文件），或者你可以下载一个主题文件，然后将tokenColors替换为文件（.tmTheme）路径：

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}
复制代码

在编写主题时，将文件后缀写为 -color-theme.json将会获得代码补全以及自动提示的功能。此外，在 ColorSublime 可以查阅到大量的 TextMate 主题，你可以将其下载链接（格式类似"https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"）直接用在generator-code中或者拓展里