在 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.

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

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值时,您可以使用智能感知,或者查看主题颜色参考以获取所有可自定义颜色的列表。

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

"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

对于最常见的构造,有一组预配置的语法标记(“注释”、“字符串”等)可用。如果您需要更多,可以通过直接指定 TextMate 主题颜色规则来实现

Advanced Token Color Customization

注意

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

要自定义特定主题,您可以通过以下方式之一进行操作

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

编辑器语义高亮

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

未启用语义高亮的“明日之夜蓝”颜色主题

without semantic highlighting

启用语义高亮的“明日之夜蓝”颜色主题

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 网页版

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

您可以通过 URL 方案:https://vscode.dev/editor/theme/<extensionId>在 VS Code 网页版中分享和体验颜色主题。

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

您可以在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 带有一个产品图标主题:Default。您可以通过在产品图标主题选择器中选择浏览更多产品图标主题...来直接从 VS Code 市场选择更多产品图标主题。

后续步骤

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

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