说明
本文更新于2019-02-18,使用VSCode 1.14.1,操作系统为Windows。
配置文件
“文件-首选项-颜色主题”即可显示所有可用的颜色主题,上下选择后Enter即可。也可通过Ctrl+Shift+P输入color theme
回车后调出“首选项:颜色主题”面板。
记VSCode的安装目录为$RELEASE
,默认的颜色主题配置文件都位于$RELEASE/resources/app/extensions
目录中。以theme-
开头的目录即为颜色主题配置(事实上,其中有些是文件图标主题)。除若干主题会共用一个目录外(theme-defaults
),大多数主题都是一个主题一个目录。
每个颜色主题配置目录包含以下文件:themes
目录、OSSREADME.json
、package.json
。themes
目录下通常使用.json
设置具体的配色方案;OSSREADME.json
描述版权等相关信息,可以忽略;package.json
令VSCode读取后能区分不同的配色方案。
下面新增一个灰色调颜色主题。在$RELEASE/resources/app/extensions
目录下新增如下目录结构。如果你不关心配置文件相关参数的解释,可无需细读后面内容,只需将相应的配置文本复制至配置文件中即可,但需注意文件均为UTF-8编码。
$RELEASE/resources/app/extensions/
\_ theme-gv-gray/
\_ themes/
| \_ gv-gray-color-theme.json
|_ package.json
预览图
package.json
package.json文件内容如下:
{
"name": "theme-gv-gray",
"version": "0.1.0",
"publisher": "GV",
"engines": { "vscode": "*" },
"contributes": {
"themes": [
{
"label": "gv-gray",
"uiTheme": "vs",
"path": "./themes/gv-gray-color-theme.json"
}
]
}
}
参数名 | 作用 |
---|---|
name | 主题ID,必需在VSCode中全局唯一,即所有主题的package.json中该值均不能重复 |
contributes -> themes -> label | 主题名,“文件-首选项-颜色主题”的列表中显示该值 |
contributes -> themes -> uiTheme | VSCode整体的UI主题,vs为浅色主题 |
contributes -> themes -> path | 定义配色方案的文件名,如为相对路径则相对于此文件 |
gv-gray-color-theme.json
因配置文件内容太长放至文末,以下说明对照配置文件内容阅读更易理解。
VSCode使用其以下两个节点:
参数名 | 作用 |
---|---|
colors | VSCode各个UI组件的颜色 |
tokenColors | 语法高亮颜色 |
colors
colors节点的内容直接通过键值对参数描述,以下列举几个参数的作用:
图示 | 参数名 | 作用 |
---|---|---|
2 | activityBar.background | 活动栏背景色 |
1 | activityBar.foreground | 活动栏前景色(例如用于图标) |
12 | editor.background | 编辑器背景颜色 |
13 | editor.foreground | 编辑器默认前景色 |
editor.findMatchBackground | 当前搜索匹配项的颜色 | |
editor.findMatchHighlightBackground | 其他搜索匹配项的颜色 | |
15 | editor.lineHighlightBackground | 光标所在行高亮文本的背景颜色 |
editor.selectionBackground | 编辑器所选内容的颜色 | |
editor.selectionHighlightBackground | 与所选内容具有相同内容的区域颜色 | |
editor.rangeHighlightBackground | 突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能 | |
16 | editorBracketMatch.background | 匹配括号的背景色 |
14 | editorCursor.foreground | 编辑器光标颜色 |
11 | editorGutter.background | 编辑器导航线的背景色,导航线包括边缘符号和行号 |
10 | editorLineNumber.foreground | 编辑器行号颜色 |
5 | sideBar.background | 侧边栏背景色 |
4 | sideBar.foreground | 侧边栏前景色 |
3 | sideBarSectionHeader.background | 侧边栏节标题的背景颜色 |
17 | statusBar.background | 标准状态栏背景色 |
17 | statusBar.noFolderBackground | 没有打开文件夹时状态栏的背景色 |
17 | statusBar.debuggingBackground | 调试程序时状态栏的背景色 |