VSCode自定义配色方案

 

 

说明

本文更新于2017-07-24,使用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"
            }
        ]
    }
}
参数名 
  
  
  
  

gv-gray-color-theme.json

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

VSCode使用其以下两个节点:

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

colors

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.exception",
            "settings": {
                "foreground": "#660000"
            }
        },
        {
            "name": "Sections",
            "scope": "entity.name.section",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "name": "Strings: Escape Sequences",
            "scope": "constant.character.escape",
            "settings": {
                "foreground": "#777777"
            }
        },
        {
            "name": "Strings: Regular Expressions",
            "scope": "string.regexp",
            "settings": {
                "foreground": "#4B83CD"
            }
        },
        {
            "name": "Strings: Symbols",
            "scope": "constant.other.symbol",
            "settings": {
                "foreground": "#AB6526"
            }
        },
        {
            "name": "Embedded Source",
            "scope": [
                "string source",
                "text source"
            ],
            "settings": {
                "background": "#EAEBE6"
            }
        },
        {
            "name": "HTML: Doctype Declaration",
            "scope": [
                "meta.tag.sgml.doctype",
                "meta.tag.sgml.doctype string",
                "meta.tag.sgml.doctype entity.name.tag",
                "meta.tag.sgml punctuation.definition.tag.html"
            ],
            "settings": {
                "foreground": "#AAAAAA"
            }
        },
        {
            "name": "HTML: Tags",
            "scope": [
                "meta.tag",
                "punctuation.definition.tag.html",
                "punctuation.definition.tag.begin.html",
                "punctuation.definition.tag.end.html"
            ],
            "settings": {
                "foreground": "#91B3E0"
            }
        },
        {
            "name": "HTML: Tag Names",
            "scope": "entity.name.tag",
            "settings": {
                "foreground": "#4B83CD"
            }
        },
        {
            "name": "HTML: Attribute Names",
            "scope": [
                "meta.tag entity.other.attribute-name",
                "entity.other.attribute-name.html"
            ],
            "settings": {
                "fontStyle": "italic",
                "foreground": "#91B3E0"
            }
        },
        {
            "name": "HTML: Entities",
            "scope": [
                "constant.character.entity",
                "punctuation.definition.entity"
            ],
            "settings": {
                "foreground": "#AB6526"
            }
        },
        {
            "name": "CSS: Selectors",
            "scope": [
                "meta.selector",
                "meta.selector entity",
                "meta.selector entity punctuation",
                "entity.name.tag.css"
            ],
            "settings": {
                "foreground": "#7A3E9D"
            }
        },
        {
            "name": "CSS: Property Names",
            "scope": [
                "meta.property-name",
                "support.type.property-name"
            ],
            "settings": {
                "foreground": "#AB6526"
            }
        },
        {
            "name": "CSS: Property Values",
            "scope": [
                "meta.property-value",
                "meta.property-value constant.other",
                "support.constant.property-value"
            ],
            "settings": {
                "foreground": "#448C27"
            }
        },
        {
            "name": "CSS: Important Keyword",
            "scope": "keyword.other.important",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "name": "Markup: Changed",
            "scope": "markup.changed",
            "settings": {
                "background": "#FFFFDD",
                "foreground": "#000000"
            }
        },
        {
            "name": "Markup: Deletion",
            "scope": "markup.deleted",
            "settings": {
                "background": "#FFDDDD",
                "foreground": "#000000"
            }
        },
        {
            "name": "Markup: Emphasis",
            "scope": "markup.italic",
            "settings": {
                "fontStyle": "italic"
            }
        },
        {
            "name": "Markup: Error",
            "scope": "markup.error",
            "settings": {
                "background": "#96000014",
                "foreground": "#660000"
            }
        },
        {
            "name": "Markup: Insertion",
            "scope": "markup.inserted",
            "settings": {
                "background": "#DDFFDD",
                "foreground": "#000000"
            }
        },
        {
            "name": "Markup: Link",
            "scope": "meta.link",
            "settings": {
                "foreground": "#4B83CD"
            }
        },
        {
            "name": "Markup: Output",
            "scope": [
                "markup.output",
                "markup.raw"
            ],
            "settings": {
                "foreground": "#777777"
            }
        },
        {
            "name": "Markup: Prompt",
            "scope": "markup.prompt",
            "settings": {
                "foreground": "#777777"
            }
        },
        {
            "name": "Markup: Heading",
            "scope": "markup.heading",
            "settings": {
                "foreground": "#AA3731"
            }
        },
        {
            "name": "Markup: Strong",
            "scope": "markup.bold",
            "settings": {
                "fontStyle": "bold"
            }
        },
        {
            "name": "Markup: Traceback",
            "scope": "markup.traceback",
            "settings": {
                "foreground": "#660000"
            }
        },
        {
            "name": "Markup: Underline",
            "scope": "markup.underline",
            "settings": {
                "fontStyle": "underline"
            }
        },
        {
            "name": "Markup Quote",
            "scope": "markup.quote",
            "settings": {
                "foreground": "#7A3E9D"
            }
        },
        {
            "name": "Markup Lists",
            "scope": "markup.list",
            "settings": {
                "foreground": "#4B83CD"
            }
        },
        {
            "name": "Markup Styling",
            "scope": [
                "markup.bold",
                "markup.italic"
            ],
            "settings": {
                "foreground": "#448C27"
            }
        },
        {
            "name": "Markup Inline",
            "scope": "markup.inline.raw",
            "settings": {
                "fontStyle": "",
                "foreground": "#AB6526"
            }
        },
        {
            "name": "Extra: Diff Range",
            "scope": [
                "meta.diff.range",
                "meta.diff.index",
                "meta.separator"
            ],
            "settings": {
                "background": "#DDDDFF",
                "foreground": "#434343"
            }
        },
        {
            "name": "Extra: Diff From",
            "scope": "meta.diff.header.from-file",
            "settings": {
                "background": "#FFDDDD",
                "foreground": "#434343"
            }
        },
        {
            "name": "Extra: Diff To",
            "scope": "meta.diff.header.to-file",
            "settings": {
                "background": "#DDFFDD",
                "foreground": "#434343"
            }
        }
    ]
}

 

 

  • 0
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Visual Studio Code 中,代码高亮是通过安装适当的语法高亮插件来实现的。以下是一些常用的插件,可以提供在不同编程语言中的代码高亮: 1. **Visual Studio Code 自带的语法高亮**:VSCode 自带了许多语言的语法高亮支持,无需安装额外插件即可获得基本的代码高亮效果。 2. **Language-specific Extensions(特定语言扩展)**:VSCode 提供了许多特定语言的插件,可以提供更丰富的代码高亮和语法检查功能。你可以在 VSCode 的扩展商店中搜索并安装特定于你使用的编程语言的插件。例如,如果你使用 Python,可以安装 "Python" 扩展。 3. **Color Themes(颜色主题)**:除了语法高亮之外,VSCode 还提供了各种颜色主题,用于自定义编辑器的外观。你可以在 VSCode 的 "扩展" 选项卡中搜索并安装不同的颜色主题插件。一旦安装了主题插件,你可以在 "首选项" -> "颜色主题" 中选择喜欢的主题。 要安装这些插件,请按照以下步骤操作: 1. 打开 Visual Studio Code。 2. 点击左侧边栏中的 "扩展" 图标(或按下 `Ctrl+Shift+X`)。 3. 在搜索框中输入插件名称(例如,"Python")或颜色主题的名称。 4. 在搜索结果中找到所需的插件或主题,并点击 "安装" 按钮。 安装完成后,VSCode 将自动应用代码高亮和颜色主题。 希望这个解答对你有帮助!如有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值