🚀 在 VS Code 中

主题

颜色主题

颜色主题使您可以修改 Visual Studio Code 用户界面中的颜色,以匹配您的偏好和工作环境。颜色主题会影响 VS Code 用户界面元素和编辑器高亮颜色。

Preview themes from the Command Palette

要选择不同的颜色主题

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

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

  3. 选择您想要的主题并按 Enter

活动颜色主题存储在您的用户设置中(键盘快捷键 ⌘, (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 设置来自动检测操作系统是否切换到高对比度配色方案。

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

  • 工作台:首选深色颜色主题 - 默认为 Dark Modern
  • 工作台:首选浅色颜色主题 - 默认为 Light Modern
  • 工作台:首选高对比度颜色主题 - 默认为 Dark High Contrast
  • 工作台:首选高对比度浅色颜色主题 - 默认为 Light High Contrast

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 语法的语法标记更准确,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. 选择您想要的主题并按 Enter

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 部分中的 文件图标主题 文章。

VS Code for the Web

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

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

例如,您可以转到 https://vscode.dev/editor/theme/sdras.night-owl 来体验 Night Owl 主题,而无需经历下载和安装过程。

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

产品图标主题

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

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

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

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

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

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

  3. 选择您想要的主题并按 Enter

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

下一步

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

  • 设置 - 了解如何通过用户和工作区设置将 VS Code 配置为您的首选项。
  • 代码片段 - 为您喜欢的语言添加额外的代码片段。
  • 扩展 API - 了解扩展 VS Code 的其他方法。
  • 颜色主题 - 颜色主题扩展 API。
  • 文件图标主题 - 文件图标主题扩展 API。