颜色主题

Visual Studio Code 用户界面中可见的颜色分为两类

工作台颜色，用于视图和编辑器，从活动栏到状态栏。所有这些颜色的完整列表可以在主题颜色参考中找到。
语法颜色和样式，用于编辑器中的源代码。这些颜色的主题设置有所不同，因为语法着色基于 TextMate 语法、TextMate 主题以及语义标记。

本指南将介绍创建主题的不同方法。

工作台颜色

创建新工作台颜色主题的最简单方法是从现有的颜色主题开始并对其进行自定义。首先切换到您想要修改的颜色主题，然后打开您的设置并对 workbench.colorCustomizations 设置进行更改。更改将实时应用于您的 VS Code 实例。

例如，以下设置将更改标题栏的背景颜色

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

所有可主题化颜色的完整列表可以在颜色参考中找到。

语法颜色

对于语法高亮颜色，有两种方法。您可以参考社区中现有的 TextMate 主题（.tmTheme 文件），或者创建自己的主题规则。最简单的方法是像上面的工作台颜色部分一样，从现有主题开始并对其进行自定义。

首先切换到要自定义的颜色主题，并使用 editor.tokenColorCustomizations 设置。更改将实时应用于您的 VS Code 实例，无需刷新或重新加载。

例如，以下设置将更改编辑器中注释的颜色

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

该设置支持一个简单的模型，其中包含一组通用的标记类型，如“comments”（注释）、“strings”（字符串）和“numbers”（数字）。如果您想设置更多颜色，则需要直接使用 TextMate 主题规则，这在语法高亮指南中有详细解释。

语义颜色

语义高亮功能在 VS Code 1.43 版本中可用于 TypeScript 和 JavaScript。我们预计其他语言很快也会采用该功能。

语义高亮基于语言服务提供的符号信息丰富了语法着色，语言服务对项目有更完整的理解。一旦语言服务器运行并计算出语义标记，着色变化就会显示出来。

每个主题都通过主题定义中的特定设置来控制是否启用语义高亮。每个语义标记的样式由主题的样式规则定义。

用户可以使用 editor.tokenColorCustomizations 设置来覆盖语义高亮功能和着色规则

为特定主题启用语义高亮

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

主题可以按照语法高亮指南中的描述，为语义标记定义主题规则。

创建新颜色主题

一旦您使用 workbench.colorCustomizations 和 editor.tokenColorCustomizations 调整了主题颜色，就可以创建真正的主题了。

使用 命令面板 中的 Developer: Generate Color Theme from Current Settings 命令生成主题文件
使用 VS Code 的 Yeoman 扩展生成器来生成一个新的主题扩展
```
npm install -g yo generator-code
yo code
```
如果您按照上述说明自定义了主题，请选择“Start fresh”（从头开始）。
将从您的设置中生成的主题文件复制到新扩展中。

您还可以通过告诉扩展生成器导入 TextMate 主题文件 (.tmTheme) 并将其打包以供 VS Code 使用，来利用现有的 TextMate 主题。或者，如果您已经下载了该主题，请将 tokenColors 部分替换为指向要使用的 .tmTheme 文件的链接。

{
  "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 后缀，这样在编辑时就能获得悬停提示、代码补全、颜色装饰器和颜色选择器。

提示： ColorSublime 有数百个现有的 TextMate 主题可供选择。选择一个您喜欢的主题，复制其下载链接以在 Yeoman 生成器中使用或放入您的扩展中。它的格式类似于 "https://raw.githubusercontent.com/Colorsublime/Colorsublime-Themes/master/themes/(name).tmTheme"

测试新颜色主题

要试用新主题，请按 F5 启动一个扩展开发宿主窗口。

在那里，通过文件 > 首选项 > 主题 > 颜色主题 打开颜色主题选择器，您就可以在下拉列表中看到您的主题。上下箭头键可以实时预览您的主题。

select my theme

对主题文件的更改会在 Extension Development Host 窗口中实时应用。

发布主题到扩展市场

如果您想与社区分享您的新主题，可以将其发布到扩展市场。使用 vsce 发布工具来打包您的主题并将其发布到 VS Code 市场。

提示： 为了方便用户找到您的主题，请在扩展描述中包含“theme”一词，并在 package.json 中将 Category 设置为 Themes。

关于如何让您的扩展在 VS Code 市场上看起来更出色，我们也有一些建议，请参阅市场展示建议。

添加新的颜色 ID

颜色 ID 也可以通过颜色贡献点由扩展贡献。这些颜色在 workbench.colorCustomizations 设置和颜色主题定义文件中使用代码补全时也会出现。用户可以在扩展贡献选项卡中查看扩展定义的颜色。

进一步阅读

CSS 技巧 - 创建 VS Code 主题

5/28/2026