颜色主题
Visual Studio Code 用户界面中可见的颜色分为两类
- 工作台颜色,用于视图和编辑器,从活动栏到状态栏。所有这些颜色的完整列表可以在主题颜色参考中找到。
- 语法颜色和样式,用于编辑器中的源代码。这些颜色的主题化有所不同,因为语法着色基于 TextMate 语法和 TextMate 主题以及语义标记。
本指南将介绍创建主题的不同方法。
工作台颜色
创建新的工作台颜色主题最简单的方法是,从现有颜色主题开始并对其进行自定义。首先切换到要修改的颜色主题,然后打开你的设置并修改 workbench.colorCustomizations
设置。更改将实时应用于你的 VS Code 实例。
例如,以下内容将更改标题栏的背景颜色
{
"workbench.colorCustomizations": {
"titleBar.activeBackground": "#ff0000"
}
}
所有可主题化颜色的完整列表可以在颜色参考中找到。
语法颜色
对于语法高亮颜色,有两种方法。你可以引用社区中现有的 TextMate 主题(.tmTheme
文件),或者创建自己的主题化规则。最简单的方法是,从现有主题开始并对其进行自定义,这与上面的工作台颜色部分非常相似。
首先切换到要自定义的颜色主题,并使用 editor.tokenColorCustomizations
设置。更改将实时应用于你的 VS Code 实例,无需刷新或重新加载。
例如,以下内容将更改编辑器中注释的颜色
{
"editor.tokenColorCustomizations": {
"comments": "#FF0000"
}
}
此设置支持一个简单的模型,其中包含一组常见的标记类型,例如“注释”、“字符串”和“数字”。如果想设置更多颜色,你需要直接使用 TextMate 主题规则,这在语法高亮指南中有详细说明。
语义颜色
VS Code 1.43 版中提供了 TypeScript 和 JavaScript 的语义高亮。我们预计其他语言也将很快采用此功能。
语义高亮根据语言服务中的符号信息丰富语法着色,语言服务对项目有更完整的理解。一旦语言服务器运行并计算出语义标记,着色更改就会出现。
每个主题都通过主题定义中的特定设置来控制是否启用语义高亮。每个语义标记的样式由主题的样式规则定义。
用户可以使用 editor.tokenColorCustomizations
设置覆盖语义高亮功能和着色规则
为特定主题启用语义高亮
"editor.tokenColorCustomizations": {
"[Material Theme]": {
"semanticHighlighting": true
}
},
主题可以为语义标记定义主题化规则,如语法高亮指南中所述。
创建新的颜色主题
使用 workbench.colorCustomizations
和 editor.tokenColorCustomizations
调整主题颜色后,就可以创建实际的主题了。
-
从命令面板中使用开发人员:从当前设置生成颜色主题命令生成主题文件
-
使用 VS Code 的 Yeoman 扩展生成器来生成新的主题扩展
npm install -g yo generator-code yo code
-
如果你按照上述说明自定义了主题,请选择“从头开始”。
-
将从设置生成的主题文件复制到新的扩展中。
你还可以通过告诉扩展生成器导入 TextMate 主题文件 (.tmTheme) 并将其打包以在 VS Code 中使用来使用现有 TextMate 主题。或者,如果你已经下载了主题,请将 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 主题可供选择。选择一个你喜欢的主题,然后复制下载链接,以在 Yeoman 生成器或你的扩展中使用。它将采用
"https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"
这样的格式。
测试新的颜色主题
要试用新主题,请按 F5 启动一个扩展开发宿主窗口。
在那里,通过 文件 > 首选项 > 主题 > 颜色主题 打开颜色主题选择器,你可以在下拉列表中看到你的主题。上下箭头可实时预览你的主题。
对主题文件的更改将实时应用于 Extension Development Host
窗口。
将主题发布到扩展市场
如果你想与社区分享你的新主题,可以将其发布到扩展市场。使用 vsce 发布工具打包你的主题并将其发布到 VS Code 市场。
提示:为了让用户更容易找到你的主题,请在扩展描述中包含“主题”一词,并在
package.json
中将Category
设置为Themes
。
我们还有关于如何让你的扩展在 VS Code 市场上看起来更出色的建议,请参阅市场展示技巧。
添加新的颜色 ID
颜色 ID 也可以通过颜色贡献点由扩展贡献。这些颜色在使用 workbench.colorCustomizations
设置和颜色主题定义文件中的代码补全时也会出现。用户可以在扩展贡献选项卡中查看扩展定义了哪些颜色。