颜色主题

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

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

本指南将涵盖您可以通过不同方式创建主题的方法。

工作台颜色

创建新工作台颜色主题的最简单方法是基于现有的颜色主题进行定制。首先切换到您要修改的颜色主题，然后打开您的设置并更改工作台颜色定制设置。更改会实时应用到您的 VS Code 实例。

例如，以下内容将更改标题栏的背景颜色：

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

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

语法颜色

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

首先切换到颜色主题进行自定义和使用编辑器.自定义标记颜色 设置。更改会实时应用到您的 VS Code 实例，无需刷新或重新加载。

例如，以下代码将更改编辑器内注释的颜色：

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

该设置支持一个简单的模型，提供一组常见的标记类型，例如'评论'、'字符串'和'数字'。如果你需要更多的颜色，请直接使用TextMate主题规则，这在语法突出显示指南中有详细解释。

语义颜色

语义突出显示在 VS Code 1.43 版本中对 TypeScript 和 JavaScript 可用。我们预计它将很快被其他语言采用。

语义突出显示基于语言服务的符号信息丰富了语法着色，对项目有更完整的理解。着色变化会在语言服务器运行并计算出语义标记后出现。

每个主题通过特定的设置控制是否启用语义突出显示，该设置是主题定义的一部分。每个语义标记的样式由主题的样式规则定义。

用户可以使用该功能覆盖语义突出显示功能和颜色化规则编辑器.自定义标记颜色设置:

启用特定主题的语义突出显示：

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

主题可以为语义标记定义主题规则，如语法高亮指南中所述。

创建新的颜色主题

一旦你调整了你的主题颜色工作台颜色定制和编辑器.自定义标记颜色是时候创建实际的主题了。

使用开发者：从当前设置生成颜色主题命令从命令面板生成主题文件
使用 VS Code 的 Yeoman 扩展生成器生成一个新的主题扩展：
```
npm install -g yo generator-code yo code
```
如果您按照上述说明定制了主题，请选择“重新开始”。
将从您的设置生成的主题文件复制到新的扩展中。

您还可以使用现有的 TextMate 主题，通过告诉扩展生成器导入一个 TextMate 主题文件 (.tmTheme) 并将其打包以在 VS Code 中使用。或者，如果您已经下载了主题，替换代币颜色部分包含链接到.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 以启动扩展开发主机Windows。

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

选择我的主题

对主题文件的更改会实时应用在扩展开发主机Windows。

将主题发布到扩展市场

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

提示： 为了方便用户找到您的主题，请在扩展说明中包含“主题”一词，并设置类别到主题在你的package.json输入：.

我们还提供如何让你的扩展在 VS Code 市场上看起来很棒的建议，见市场展示技巧。

添加新的颜色ID

颜色ID也可以通过扩展在颜色贡献点提交。这些颜色在使用中的代码完成时也会显示工作台颜色定制 设置和颜色主题定义文件。用户可以在扩展贡献标签中查看扩展定义的颜色。

进一步阅读

CSS 巧门 - 创建 VS Code 主题