您现在的位置是:网站首页> 编程资料编程资料

VSCode自定义配色方案的实现_相关技巧_

2023-05-27 365人已围观

简介 VSCode自定义配色方案的实现_相关技巧_

说明

本文更新于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.jsonpackage.jsonthemes目录下通常使用.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 -> uiThemeVSCode整体的UI主题,vs为浅色主题
contributes -> themes -> path定义配色方案的文件名,如为相对路径则相对于此文件

因配置文件内容太长放至文末,以下说明对照配置文件内容阅读更易理解。

VSCode使用其以下两个节点:

参数名作用
colorsVSCode各个UI组件的颜色
tokenColors语法高亮颜色

colors节点的内容直接通过键值对参数描述,以下列举几个参数的作用:

图示参数名作用
2activityBar.background活动栏背景色
1activityBar.foreground活动栏前景色(例如用于图标)
12editor.background编辑器背景颜色
13editor.foreground编辑器默认前景色
editor.findMatchBackground当前搜索匹配项的颜色
editor.findMatchHighlightBackground其他搜索匹配项的颜色
15editor.lineHighlightBackground光标所在行高亮文本的背景颜色
editor.selectionBackground编辑器所选内容的颜色
editor.selectionHighlightBackground与所选内容具有相同内容的区域颜色
editor.rangeHighlightBackground突出显示范围的背景颜色,例如 "Quick Open" 和“查找”功能
16editorBracketMatch.background匹配括号的背景色
14editorCursor.foreground编辑器光标颜色
11editorGutter.background编辑器导航线的背景色,导航线包括边缘符号和行号
10editorLineNumber.foreground编辑器行号颜色
5sideBar.background侧边栏背景色
4sideBar.foreground侧边栏前景色
3sideBarSectionHeader.background侧边栏节标题的背景颜色
17statusBar.background标准状态栏背景色
17statusBar.noFolderBackground没有打开文件夹时状态栏的背景色
17statusBar.debuggingBackground调试程序时状态栏的背景色
9tab.activeBackground活动选项卡的背景色
8tab.activeForeground活动组中活动选项卡的前景色
7tab.inactiveBackground非活动选项卡的背景色
6tab.inactiveForeground活动组中非活动选项卡的前景色

tokenColors

tokenColors使用一个对象数组描述各语法高亮颜色。每个对象有如下结构:

 { "name": "Comment", "scope": [ "comment", "punctuation.definition.comment" ], "settings": { "background": "#ffffff", "fontStyle": "italic", "foreground": "#000000" } }

参数名作用
name规则描述,一段容易理解的描述性文字
scope作用域,指定使用那些VSCode内部对象,其含义参看Scope Naming
setting -> background背景色,可选
setting -> fontStyle字体,可选,为bold、italic、underline
setting -> foreground前景色,可选

以下列举文末的配置文件中几个name所指定的参数的作用:

参数名作用
Character字符
Class类名
Comment注释
Function函数名
Keyword关键字
Number数值
Operator运算符
Parameter函数参数
Punctuation标点符号
String字符串
Type内置类型
Variable变量名

文件内容

 { "name": "gv-gray", "colors": { "activityBar.background": "#e0e0e0", "activityBar.foreground": "#000000", "editor.background": "#c8c8c8", "editor.foreground": "#000000", "editor.findMatchBackground": "#ffff00", "editor.findMatchHighlightBackground": "#ffff00", "editor.lineHighlightBackground": "#c0c0c0", "editor.selectionBackground": "#b0b0b0", "editor.selectionHighlightBackground": "#dfdfdf", "editor.rangeHighlightBackground": "#b0b0b0", "editorBracketMatch.background": "#b0b0b0", "editorCursor.foreground": "#333333", "editorGutter.background": "#d3d3d3", "editorLineNumber.foreground": "#777777", "sideBar.background": "#f5f5f5", "sideBar.foreground": "#000000", "sideBarSectionHeader.background": "#e0e0e0", "statusBar.background": "#444444", "statusBar.noFolderBackground": "#444444", "statusBar.debuggingBackground": "#444444", "tab.activeBackground": "#afafaf", "tab.activeForeground": "#000000", "tab.inactiveBackground": "#e0e0e0", "tab.inactiveForeground": "#000000", // Other colors. "activityBarBadge.background": "#705697", "button.background": "#705697", "dropdown.background": "#F5F5F5", "editorGroup.dropBackground": "#C9D0D988", "editorWhitespace.foreground": "#AAAAAA", "focusBorder": "#A6B39B", "inputOption.activeBorder": "#adafb7", "inputValidation.infoBorder": "#4ec1e5", "inputValidation.infoBackground": "#f2fcff", "inputValidation.warningBackground": "#fffee2", "inputValidation.warningBorder": "#ffe055", "inputValidation.errorBackground": "#ffeaea", "inputValidation.errorBorder": "#f1897f", "list.activeSelectionForeground": "#6c6c6c", "list.focusBackground": "#CADEB9", "list.activeSelectionBackground": "#c4d9b1", "list.inactiveSelectionBackground": "#d3dbcd", "list.highlightForeground": "#9769dc", "notification.background": "#442e66", "panel.background": "#F5F5F5", "peekViewEditor.matchHighlightBackground": "#C2DFE3", "peekViewTitle.background": "#F2F8FC", "peekViewEditor.background": "#F2F8FC", "peekViewResult.background": "#F2F8FC", "peekView.border": "#705697", "peekViewResult.matchHighlightBackground": "#93C6D6", "pickerGroup.foreground": "#A6B39B", "pickerGroup.border": "#749351" }, "tokenColors": [ { "settings": { "background": "#ffffff", "foreground": "#000000" } }, { "name": "Character", "scope": [ "constant", "constant.character" ], "settings": { "foreground": "#008000" } }, { "name": "Class", "scope": [ "entity.name.type", "entity.other.inherited-class", "support.class" ], "settings": { "foreground": "#000080" } }, { "name": "Comment", "scope": [ "comment", "punctuation.definition.comment" ], "settings": { "fontStyle": "italic", "foreground": "#0066ff" } }, { "name": "Function", "scope": [ "entity.name.function", "support.function" ], "settings": { "foreground": "#000000" } }, { "name": "Keyword", "scope": [ "keyword", "storage" ], "settings": { "fontStyle": "bold", "foreground": "#000080" } }, { "name": "Number", "scope": [ "constant.numeric" ], "settings": { "foreground": "#0044bb" } }, { "name": "Operator", "scope": "keyword.operator", "settings": { "foreground": "#000000" } }, { "name": "Parameter", "scope": "variable.parameter", "settings": { "fontStyle": "underline" } }, { "name": "Punctuation", "scope": "punctuation", "settings": { "foreground": "#000000" } }, { "name": "String", "scope": "string", "settings": { "foreground": "#008000" } }, { "name": "Type", "scope": [ "storage.type", "support.type" ], "settings": { "fontStyle": "", "foreground": "#000080" } }, { "name": "Variable", "scope": [ "support.variable", "variable" ], "settings": { "foreground": "#000000" } }, // Other token colors. { "name": "Comments: Preprocessor", "scope": "comment.block.preprocessor", "settings": { "fontStyle": "", "foreground": "#AAAAAA" } }, { "name": "Comments: Documentation", "scope": [ "comment.documentation", "comment.block.documentation" ], "settings": { "foreground": "#448C27" } }, { "name": "Invalid - Deprecated", "scope": "invalid.deprecated", "settings": { "background": "#96000014" } }, { "name": "Invalid - Illegal", "scope": "invalid.illegal", "settings": { "background": "#96000014", "foreground": "#660000" } }, { "name": "Language Constants", "scope": [ "constant.language", "support.constant", "variable.language" ], "settings": { "foreground": "#AB6526" } }, { "name": "Exceptions", "scope": "entity.name.exc
                
                

-六神源码网