vscode主题配置参考

2021-12-15 16:55 作者:大敏鸽 0人读过 | 我要投稿

有关 VS Code 的基本设置，本文不再赘述，请自行百度。VS Code 可使用图形化界面进行设置，也可以直接写配置文件进行设置，这里只介绍直接写配置文件的方法。打开配置文件：File >> Preferences >> Settings 然后点击右上角的这个图标：

VS Code 的主题配置主要包括各种语言代码文本的语法高亮和编辑器内的各种前景色和背景色（例如代码智能补全提示候选项的高亮色）。其中大部分设置可通过安装一个主题插件（插件的安装配置方法可参考 vscode插件配置参考）搞定，启用即生效，若感觉主题有些地方的效果不符合期望，则自己再做一些额外配置覆盖主题默认的配置即可。

以下是基于 Bluloco Dark Theme 插件（或 Rainier 插件 也行，效果基本类似）做一定额外配置后的一套主题配置，仅供各位朋友参考：

{
    // 如果觉得有哪个颜色自己不喜欢，觉得太素了或者太花了，按照自己的习惯和喜好更改即可，VS Code 的配置修订是保存即生效的，无需重启，调试很方便

    /* ===主题色彩相关配置=== */
    "workbench.iconTheme": "vscode-icons", // 图标(插件)
    // "workbench.colorTheme": "Rainier",  // 主题(插件)
    "workbench.colorTheme": "Bluloco Dark",
    // 语法高亮
    "editor.tokenColorCustomizations": {
        "comments": {
            // "fontStyle": "italic",
            // "foreground": "#666666"
        },
        "functions": {
            "fontStyle": "bold",
            "foreground": "#f770d9"
        },
        "keywords": {
            // "fontStyle": "bold",
            "foreground": "#937dd6"
        },
        "variables": {
            "fontStyle": "italic",
            "foreground": "#6cb900"
        },
        "numbers": {
            "fontStyle": "bold",
            "foreground": "#ffff00"
        },
        "strings": {
            // "fontStyle": "italic",
            // "foreground": "#fca106"
        },
        "types": {
            // "fontStyle": "bold",
            // "foreground": "#666666"
        },
        // 特定的文本色彩控制(高级设置)
        /*
        上述几种设置的"scope": 
            comments: 'comment',
            strings: 'string',
            keywords: 'keyword',
            numbers: 'constant.numeric',
            types: 'entity.name.type',
            functions: 'entity.name.function',
            variables: 'variable'
        */
        "textMateRules": [
            {
                // html标签
                "scope": ["entity.name.tag.html"],
                "settings": {
                    // "foreground": "#c54a67"
                    "foreground": "#34a853"
                }
            }
        ]
    },
    // 工作区颜色
    "workbench.colorCustomizations": {
        "editor.selectionBackground": "#fdfdda", // 选中区域高亮背景色
        "editor.lineHighlightBackground": "#000001", // 当前活跃行背景色
        "editorCursor.foreground": "#ff5e11", // 光标颜色(推荐可选: #ffff00 #ff5e11)
        "editorSuggestWidget.selectedBackground": "#34a853", // 提示选项选中项背景颜色
        "editorBracketMatch.border": "#666666",  // 当前被选中的成对括号高亮区边框色
        "editorBracketMatch.background": "#666666",  // 当前被选中的成对括号高亮区背景色
        "editorWidget.background": "#322f3b", // 查找栏背景色(龙葵紫)
        "editor.findMatchBackground": "#8158fc", // 和查找项匹配的高亮背景色
        "tab.activeBackground": "#937dd6", // 当前活动窗口tab标签颜色(可选: #fc58fe)
        "menu.selectionBackground": "#34a853", // 菜单选中项背景色
        "list.hoverBackground": "#34a853", // 文件列表光标悬浮背景色
        "list.activeSelectionBackground": "#666666", // 文件列表中打开查看但未处于激活状态的背景色
        "list.inactiveSelectionBackground": "#555555", // 文件列表中当前处于激活状态(可编辑)的背景色
        "minimap.errorHighlight": "#ff0000",  // 代码略缩图里报错所在行高亮色
        "minimap.findMatchHighlight": "#34a853",  // 代码略缩图里匹配项所在行高亮色
        "minimap.selectionHighlight": "#ff5e11",  // 代码略缩图里被选中区域高亮色
        "editorHoverWidget.foreground": "#6cb900" // 参数提示高亮 since V1.62.0
    },
}

目前 VS Code 插件库中非常受欢迎的主题插件包括但不仅限于如下这些：

Atom One Dark Theme

Atom One Light Theme

Bluloco Dark Theme

Bluloco Light Theme

Darcula Theme

Gruvbox Theme

Material Theme

One Monokai 80s Plus Theme

Palenight Theme

Rainier

RainbowDrops

Slack Theme

Super One Dark Theme

VS Code 可以同时安装多个插件看需要和心情切换着用（比如说光线弱时切深色主题，光线强时切浅色主题），切换的快捷键默认是 Ctrl+`(反引号和波浪号键，位于键盘最左上角Esc键的正下方第一个就是)

无图无真相，部分主题插件的效果图如下（已做上文中设置示例中"editor.tokenColorCustomizations"部分的优化处理，语言以JS为例，其他各种语言高亮效果都比较接近，因为高亮要素无非就是主背景色、主前景色、关键字、标识符、数字、符号、方法、注释、变量、常量等，各种语言这些要素基本都一样）：