跳至主要內容

颜色主题

黄曦大约 4 分钟Command命令

Visual Studio Code 颜色主题开发指南

1. 概述

Visual Studio Code 用户界面中的颜色分为两大类：

  • 工作台颜色：用于视图和编辑器组件，从活动栏到状态栏。完整列表参见主题颜色参考open in new window。
  • 语法颜色与样式：用于编辑器中的源代码。其着色机制基于 TextMate 语法、TextMate 主题以及语义标记。

本指南将介绍创建自定义颜色主题的多种方法。

2. 自定义工作台颜色

最快捷的方式是基于现有主题进行微调。

  1. 切换到想修改的颜色主题。
  2. 打开设置（settings.json），使用 workbench.colorCustomizations 属性。
  3. 更改会实时生效，无需重启。

示例：将标题栏（活动窗口）背景改为红色。

{
  "workbench.colorCustomizations": {
    "titleBar.activeBackground": "#ff0000"
  }
}

所有可用的颜色 ID 请查阅颜色参考文档open in new window。

3. 自定义语法颜色

有两种方式调整语法高亮：

  • 直接引用现有的 TextMate 主题（.tmTheme 文件）。
  • 创建自己的规则。

推荐先从现有主题开始，通过 editor.tokenColorCustomizations 进行微调，更改也会实时生效。

示例：将注释颜色改为红色。

{
  "editor.tokenColorCustomizations": {
    "comments": "#FF0000"
  }
}

该设置支持一组通用标记类型（如 comments、strings、numbers）。如需更精细的控制，需直接编写 TextMate 规则，详见语法高亮指南open in new window。

4. 语义颜色（Semantic Highlighting）

自 VS Code 1.43 起支持 TypeScript 和 JavaScript，其他语言逐步跟进。

语义高亮利用语言服务提供的符号信息（如变量类型、函数作用域等）进行着色，比传统语法着色更准确。

  • 启用方式：通过主题定义中的 semanticHighlighting 控制，用户也可在 editor.tokenColorCustomizations 中覆盖。

示例：为特定主题启用语义高亮。

"editor.tokenColorCustomizations": {
    "[Material Theme]": {
        "semanticHighlighting": true
    }
}

主题开发者可在主题文件中定义语义标记的样式规则（规则格式同语法高亮）。

5. 创建全新颜色主题

当你完成上述自定义后，可以生成一个独立的主题文件。

方法一：从当前设置生成

使用命令面板（Ctrl+Shift+P）中的 Developer: Generate Color Theme from Current Settings，该命令会根据当前 workbench.colorCustomizations 和 editor.tokenColorCustomizations 生成一个 .json 主题文件。

方法二：使用 Yeoman 生成器（推荐）

安装生成器并创建新扩展：

npm install -g yo generator-code
yo code

选择 "Start fresh"（从头开始），然后将之前生成的主题文件复制到新扩展的相应位置。

方法三：导入现有 TextMate 主题

若已有 .tmTheme 文件，可在生成器中选择导入，或在主题文件的 tokenColors 字段直接引用外部文件：

{
  "type": "dark",
  "colors": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "editorIndentGuide.background": "#404040",
    "editorRuler.foreground": "#333333",
    "activityBarBadge.background": "#007acc",
    "sideBarTitle.foreground": "#bbbbbb"
  },
  "tokenColors": "./Diner.tmTheme"
}

提示：

  • 主题文件建议使用 -color-theme.json 后缀，这样编辑时能获得悬停提示、颜色选择器等智能支持。
  • ColorSublimeopen in new window 提供了大量现成的 TextMate 主题，可直接复制下载链接用于生成器。

6. 测试新主题

  1. 在扩展项目根目录按 F5 启动扩展开发宿主窗口。
  2. 在宿主窗口中，打开 文件 > 首选项 > 主题 > 颜色主题。
  3. 你的主题会出现在下拉列表中，用上下箭头可实时预览不同主题的效果。
  4. 对主题文件的任何修改都会在宿主窗口中即时应用，无需重启。

7. 发布主题到扩展市场

若想与社区分享你的主题，可发布到 Visual Studio Code 扩展市场open in new window。

  • 使用 vsce 工具打包并发布：
npm install -g vsce
vsce package   # 打包为 .vsix
vsce publish   # 发布到市场

  • 推荐：在 package.json 中将 "category" 设为 "Themes"，并在描述中包含 “theme” 关键词，便于用户搜索。

  • 更多展示建议请参考市场展示指南open in new window。

8. 添加新的颜色 ID（扩展贡献）

扩展可以通过颜色贡献点（contributes.colors）自定义颜色 ID。这些颜色会出现在 workbench.colorCustomizations 设置的代码补全中，用户也可在扩展贡献选项卡中查看。

示例（在 package.json 中）：

{
  "contributes": {
    "colors": [
      {
        "id": "myExtension.myColor",
        "description": "用于我的扩展的特定颜色",
        "defaults": {
          "light": "#FFFFFF",
          "dark": "#000000",
          "highContrast": "#FF0000"
        }
      }
    ]
  }
}

这样，主题文件或用户设置中就可以使用 "myExtension.myColor" 来覆盖该颜色。