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中或者拓展里
测试颜色主题
按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的实际含义及用途