乐闻世界logo
6月2日 00:05

VSCode 主题怎么换？配色方案、图标主题和自定义颜色 token 详解

VSCode 主题分两种：颜色主题（编辑器配色）和文件图标主题（资源管理器图标）。想更深入，还可以通过 color customization 精细控制每个 UI 元素的颜色。

安装主题

扩展市场里有上千个主题。Ctrl+Shift+X 打开扩展面板，搜索 "theme" 就能找到。几个口碑好的：

  • One Dark Pro：Atom 风格暗色主题，下载量最高之一
  • Dracula：经典暗色，跨编辑器统一风格
  • GitHub Theme：GitHub 官方亮色/暗色主题
  • Catppuccin：柔和的暖色调暗色主题，2024-2025 年热度上升很快
  • Tokyo Night：偏蓝调暗色主题，和 One Dark Pro 风格接近但更素

装完主题后切换：Ctrl+K Ctrl+T，从列表中选择。

文件图标主题

图标主题控制侧边栏文件树里的图标样式：

  • Material Icon Theme：Google Material 风格，覆盖文件类型最全
  • vscode-icons：VSCode 官方团队出品，辨识度高

切换图标主题：Ctrl+Shift+P 输入 File Icon Theme，从列表中选择。图标主题和颜色主题独立，可以混搭。

精细自定义：覆盖特定颜色

装了主题但想改几个颜色？不用从零写主题，用 workbench.colorCustomizations 覆盖：

json
// settings.json
{
    "workbench.colorCustomizations": {
        "editor.background": "#1a1b26",
        "editor.foreground": "#a9b1d6",
        "editorCursor.foreground": "#c0caf5",
        "editor.selectionBackground": "#33467c",
        "editor.lineHighlightBackground": "#1f2335",
        "sideBar.background": "#16161e",
        "activityBar.background": "#16161e"
    }
}

这样只改你关心的几个颜色，主题的其他部分保持不变。比从零写主题简单得多。

自定义语法高亮颜色

语法高亮的颜色由 TextMate token 控制，可以通过 editor.tokenColorCustomizations 覆盖：

json
// settings.json
{
    "editor.tokenColorCustomizations": {
        "textMateRules": [
            {
                "scope": "keyword",
                "settings": {
                    "foreground": "#bb9af7",
                    "fontStyle": "bold"
                }
            },
            {
                "scope": ["comment", "punctuation.definition.comment"],
                "settings": {
                    "foreground": "#565f89",
                    "fontStyle": "italic"
                }
            },
            {
                "scope": "string",
                "settings": {
                    "foreground": "#9ece6a"
                }
            }
        ]
    }
}

常见 scope：keyword（关键字）、string（字符串）、comment（注释）、function（函数名）、variable（变量名）、number（数字）。

按项目设置不同主题

每个项目可以用不同的主题——工作项目用暗色，个人项目用亮色：

json
// .vscode/settings.json（项目级别）
{
    "workbench.colorCustomizations": {
        "[One Dark Pro]": {
            "editor.background": "#1e1e2e"
        },
        "[GitHub Dark]": {
            "editor.background": "#0d1117"
        }
    }
}

[主题名] 语法让定制只在特定主题下生效。

创建自己的主题扩展

如果改动太多，不如直接打包成主题扩展分享。用 Yoeman 脚手架生成：

bash
npm install -g yo generator-code
yo code
# 选择 "New Color Theme"

生成的项目里有一个 JSON 文件定义所有颜色。改完后 vsce publish 发布到扩展市场。

标签：VSCode