VS Code插件开发教程（6）颜色主题一览 Color Theme

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

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

本篇教程将会涉及建立颜色主题的各类方法github

工做台颜色

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

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

完整的颜色配置项能够在此处查询 Theme Color编程

语法颜色（Syntax）

有两种方式生成本身的语法颜色：json

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

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

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

更多信息可见 Syntax Highlight Guide服务器

语义颜色（Semantic）

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

用户能够用editor.tokenColorCustomizations字段覆盖制定主题的语义高亮：app

"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中或者拓展里

测试颜色主题

按F5键启动调试模式，而后从 File > Preferences > Color Theme 选中本身建立的主题查看效果，调试状态下对主题文件的修改会实时生效

发布颜色主题

你能够经过 vsce publishing tool 将主题发布到插件集市，以便和你们分享你的主题，同时 Marketplace Presentation Tips 会对你发布到插件集市优化上有所帮助

将package.json里的Category字段名称设置为Themes能够让用户更容易找到你的主题

建立颜色ID

你能够经过 color contribution point 来建立本身的颜色ID，这样颜色就能够用在color contribution point和颜色主题文件里的代码自动补全，用户能够在Contributions tab下看到该插件定义的颜色

有待进一步研究的问题

以更加直观的方式说明颜色ID的实际含义及用途

VS Code插件开发教程（6） 颜色主题一览 Color Theme