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

主题

颜色主题

颜色主题允许您修改 Visual Studio Code 用户界面中的颜色以匹配您的偏好和工作环境。颜色主题会影响 VS Code 用户界面元素和编辑器突出显示颜色。

Preview themes from the Command Palette

要选择不同的颜色主题

  1. 选择 文件 > 首选项 > 主题 > 颜色主题 菜单项,或使用 首选项:颜色主题 命令 (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) 显示颜色主题选择器。

  2. 使用 上箭头下箭头 键在列表中导航并预览主题的颜色。

  3. 选择所需的主题并按 回车键

活动颜色主题存储在您的用户 设置 中(键盘快捷键 ⌘, (Windows、Linux Ctrl+,))。

  // Specifies the color theme used in the workbench.
  "workbench.colorTheme": "Solarized Dark"

提示:默认情况下,主题存储在您的用户设置中,并全局应用于所有工作区。您也可以配置特定于工作区的主题。为此,请在工作区 设置 中设置主题。

Screenshot of Settings editor to set a workspace-specific Color Theme.

市场中的颜色主题

VS Code 中有几个开箱即用的颜色主题供您尝试。社区已将更多主题上传到 VS Code 扩展市场

您可以直接从颜色主题选择器中的 VS Code 市场中选择颜色主题,方法是选择 浏览其他颜色主题...

Screenshot of Color Theme picker, highlighting the option to browse themes from the VS Code Marketplace.

或者,您可以在扩展视图 (⇧⌘X (Windows、Linux Ctrl+Shift+X)) 搜索框中搜索主题,方法是使用 @category:"themes" 过滤器。

Searching for themes in the Extensions view

根据操作系统颜色方案自动切换

Windows 和 macOS 支持浅色和深色颜色方案。有一个设置,window.autoDetectColorScheme,它指示 VS Code 监听操作系统颜色方案的变化并相应地切换到匹配的主题。

类似地,您可以使用 window.autoDetectHighContrast 设置自动检测操作系统是否切换到高对比度颜色方案。

要自定义颜色方案更改时使用的主题,您可以在设置编辑器中设置首选的浅色、深色和高对比度主题

  • 工作区:首选深色颜色主题 - 默认值为深色现代
  • 工作区:首选浅色颜色主题 - 默认值为浅色现代
  • 工作区:首选高对比度颜色主题 - 默认值为深色高对比度
  • 工作区:首选高对比度浅色颜色主题 - 默认值为浅色高对比度

Settings editor filtered on the preferred color themes settings

自定义颜色主题

工作区颜色

您可以使用 workbench.colorCustomizationseditor.tokenColorCustomizations 用户 设置 自定义活动颜色主题。

要设置 VS Code UI 元素(例如列表和树(文件资源管理器、建议小部件)、差异编辑器、活动栏、通知、滚动条、拆分视图、按钮等)的颜色,请使用 workbench.colorCustomizations

activity bar theming

您可以在设置 workbench.colorCustomizations 值时使用 IntelliSense,或者,要查看所有可自定义颜色的列表,请参阅 主题颜色参考

要对特定主题进行自定义,请使用以下语法

"workbench.colorCustomizations": {
    "[Monokai]": {
        "sideBar.background": "#347890"
    }
}

如果自定义应用于多个主题,则可以命名多个主题或使用 * 作为名称开头和结尾的通配符

"workbench.colorCustomizations": {
    "[Abyss][Red]": {
        "activityBar.background": "#ff0000"
    },
    "[Monokai*]": {
        "activityBar.background": "#ff0000"
    }
}

如果主题设置了您不喜欢的颜色或边框,则可以使用 default 将其恢复为原始值

  "workbench.colorCustomizations": {
      "diffEditor.removedTextBorder": "default"
  }

编辑器语法突出显示

要调整编辑器的语法突出显示颜色,请在用户 设置 settings.json 文件中使用 editor.tokenColorCustomizations

Token Color Customization

为最常见的构造提供了预配置的语法标记集('comments'、'strings'、...)。如果您需要更多,可以通过直接指定 TextMate 主题颜色规则来实现

Advanced Token Color Customization

注意:直接配置 TextMate 规则是一项高级技能,因为您需要了解 TextMate 语法的工作原理。请访问 颜色主题指南 了解更多信息。

要自定义特定主题,您可以通过以下方式之一来实现

"editor.tokenColorCustomizations": {
    "[Monokai]": {
        "comments": "#229977"
    },
    "[*Dark*]": {
        "variables": "#229977"
    },
    "[Abyss][Red]": {
        "keywords": "#f00"
    }
}

编辑器语义突出显示

某些语言(目前:TypeScript、JavaScript、Java)提供语义标记。语义标记基于语言服务的符号理解,比来自由正则表达式驱动的 TextMate 语法的语法标记更准确。从语义标记计算出的语义突出显示位于语法突出显示之上,并且可以校正和丰富突出显示,如以下示例所示

没有语义突出显示的“Tomorrow Night Blue”颜色主题

without semantic highlighting

具有语义突出显示的“Tomorrow Night Blue”颜色主题

with semantic highlighting

注意基于语言服务符号理解的颜色差异

  • 第 10 行:languageModes 被着色为参数。
  • 第 11 行:RangePosition 被着色为类,而 document 被着色为参数。
  • 第 13 行:getFoldingRanges 被着色为函数。

设置 editor.semanticHighlighting.enabled 是语义高亮的主要控制开关。它可以取值 truefalseconfiguredByTheme

  • truefalse 分别为所有主题启用或禁用语义高亮。
  • configuredByTheme 是默认值,允许每个主题控制是否启用语义高亮。所有与 VS Code 捆绑的主题(例如,默认的 "Dark+")默认情况下都启用了语义高亮。

您可以通过以下方式覆盖主题设置:

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true
    }
}

当语义高亮已启用且语言可用时,主题将负责配置是否以及如何对语义标记进行着色。一些语义标记是标准化的,并映射到成熟的 TextMate 范围。如果主题对这些 TextMate 范围具有着色规则,则语义标记将使用该颜色进行渲染,而无需任何额外的着色规则。

可以在 editor.semanticTokenColorCustomizations" 中配置额外的样式规则。

"editor.semanticTokenColorCustomizations": {
    "[Rouge]": {
        "enabled": true,
        "rules": {
            "*.declaration": { "bold": true }
        }
    }
}

要查看计算的语义标记以及它们的样式,可以使用范围检查器(开发者:检查编辑器标记和范围),该检查器显示当前光标位置文本的信息。

scope inspector

如果给定位置的语言支持语义标记,并且主题启用了语义标记,则检查工具将显示一个名为 语义标记类型 的部分。该部分显示语义标记信息(类型和任何数量的修饰符)以及适用的样式规则。

有关语义标记和样式规则语法的更多信息,请参阅 语义高亮指南

创建自己的颜色主题

创建和发布主题扩展非常容易。在用户设置中自定义您的颜色,然后使用 开发者:从当前设置生成颜色主题 命令生成主题定义文件。

VS Code 的 Yeoman 扩展生成器 可以帮助您生成扩展的其余部分。

请参阅扩展 API 部分的 创建新的颜色主题 文章,以了解更多信息。

删除默认颜色主题

如果您想从颜色主题选择器中删除与 VS Code 捆绑的一些默认主题,您可以从扩展视图(⇧⌘X (Windows, Linux Ctrl+Shift+X))中禁用它们。从扩展视图顶部选择 筛选扩展 按钮,选择 内置 选项,您将看到一个列出默认主题的 主题 部分。

built-in themes

您可以禁用内置主题扩展,就像禁用任何其他 VS Code 扩展 一样,使用齿轮上下文菜单上的 禁用 命令。

disable theme

文件图标主题

文件图标指示特定文件类型。这些图标在资源管理器视图和选项卡标题中与文件名一起显示。文件图标主题可以由扩展贡献。

要选择不同的文件图标主题

  1. 选择 文件 > 首选项 > 主题 > 文件图标主题 菜单项,或使用 首选项:文件图标主题 命令来显示文件图标主题选择器。

  2. 使用 上箭头下箭头 键在列表中导航并预览主题的图标。

  3. 选择所需的主题并按 回车键

file icon theme dropdown

默认情况下,使用 Seti 文件图标主题,您在资源管理器视图中看到的图标就是这些图标。VS Code 会在重启之间记住您的文件图标主题选择。您可以通过选择 来禁用文件图标。

VS Code 捆绑了两个文件图标主题:MinimalSeti。要安装更多文件图标主题,请在文件图标主题选择器中选择 安装更多文件图标主题 项,这将打开扩展视图,并按图标主题进行筛选。

您也可以直接浏览 VS Code 市场 网站以查找可用的主题。

活动文件图标主题会保留在您的用户 设置 中(键盘快捷键 ⌘, (Windows, Linux Ctrl+,))。

  // Specifies the file icon theme used in the workbench.
  "workbench.iconTheme": "vs-seti"

创建自己的文件图标主题

您可以从图标(最好是 SVG)创建自己的文件图标主题,请参阅扩展 API 部分的 文件图标主题 文章以了解更多详细信息。

适用于 Web 的 VS Code

VS Code for the Web 提供免费的零安装 VS Code 体验,完全在您的浏览器中运行,地址为 https://vscode.dev

您可以通过 URL 方案在 VS Code for the Web 中共享和体验颜色主题:https://vscode.dev/editor/theme/<extensionId>

例如,您可以访问 https://vscode.dev/editor/theme/sdras.night-owl 体验 Night Owl 主题,而无需进行下载和安装过程。

您可以在 VS Code for the Web 文档 中了解更多关于预览和共享主题的信息。

产品图标主题

产品图标主题使您能够更改 VS Code 用户界面中的图标,除了特定文件类型的图标。例如,您可以修改活动栏中视图的图标,或修改标题栏中用于更改布局的图标。

请注意以下图像中,当选择不同的产品图标主题时,活动栏图标是如何更新的。

Screenshot of the Product Icon Theme dropdown, and how the Activity Bar icons are changed.

要选择不同的产品图标主题

  1. 选择 文件 > 首选项 > 主题 > 产品图标主题 菜单项,或使用 首选项:产品图标主题 命令来显示产品图标主题选择器。

  2. 使用 上箭头下箭头 键在列表中导航并预览主题的图标。

  3. 选择所需的主题并按 回车键

默认情况下,VS Code 附带一个产品图标主题,默认。您可以直接从产品图标主题选择器中选择更多产品图标主题,方法是选择 浏览更多产品图标主题...

后续步骤

主题只是自定义 VS Code 的一种方式。如果您想了解有关 VS Code 自定义和扩展性的更多信息,请尝试阅读以下文章

  • 设置 - 了解如何通过用户和工作区设置来配置 VS Code 以满足您的偏好。
  • 代码片段 - 为您喜欢的语言添加额外的代码片段。
  • 扩展 API - 了解有关扩展 VS Code 的其他方式。
  • 颜色主题 - 颜色主题扩展 API。
  • 文件图标主题 - 文件图标主题扩展 API。