现已推出！阅读 10 月份发布的新功能和修复。

颜色主题

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

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

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

工作台颜色

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

例如，以下操作将更改标题栏的颜色

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

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

语法颜色

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

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

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

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

该设置支持一个简单的模型，其中包含一组常见的标记类型，例如“注释”、“字符串”和“数字”。如果要对更多内容进行着色，则需要直接使用 TextMate 主题规则，这些规则在 语法高亮指南 中进行了详细解释。

语义颜色

语义高亮在 VS Code 1.43 版本中适用于 TypeScript 和 JavaScript。我们预计它很快就会被其他语言采用。

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

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

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

为特定主题启用语义高亮

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

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

创建新的颜色主题

使用 workbench.colorCustomizations 和 editor.tokenColorCustomizations 微调主题颜色后，就可以创建实际的主题了。

  1. 使用 **命令面板** 中的 **开发者：从当前设置生成颜色主题** 命令生成主题文件。

  2. 使用 VS Code 的 Yeoman 扩展生成器生成新的主题扩展

    npm install -g yo generator-code
yo code

  3. 如果您自定义了主题，如上所述，请选择“从头开始”。

    yo code theme

  4. 将从设置生成的主题文件复制到新的扩展中。

您还可以使用现有的 TextMate 主题，方法是告诉扩展生成器导入 TextMate 主题文件（.tmTheme）并将其打包以在 VS Code 中使用。或者，如果您已经下载了主题，请用指向 .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，您将在编辑时获得悬停、代码完成、颜色装饰器和颜色选择器。

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

测试新的颜色主题

要试用新的主题，请按 F5 启动扩展开发主机窗口。

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

select my theme

主题文件的更改会实时应用于 扩展开发主机 窗口。

将主题发布到扩展市场

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

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

我们还有一些关于如何让您的扩展在 VS Code 市场中看起来很棒的建议，请参阅 市场展示提示。

添加新的颜色 ID

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

进一步阅读

10/29/2024