本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

主题

颜色主题

颜色主题使您能够修改Visual Studio Code用户界面的颜色,以符合您的偏好和工作环境。一种颜色主题会影响VS Code用户界面元素和编辑器突出显示颜色。

从命令面板预览主题

选择不同的颜色主题:

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

  2. 使用键来浏览列表并预览主题的颜色。

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

您当前使用的活动颜色主题存储在您的用户设置中 (键盘快捷键⌘, (Windows, LinuxCtrl+,))。

  // 指定在工作区中使用的颜色主题。
  "workbench.colorTheme": "Solarized Dark"
小贴士

默认情况下,主题存储在您的用户设置中,并且对所有工作区全局应用。您还可以配置特定于工作区的主题。要这样做,请在工作区设置中设置一个主题。

设置编辑器的截图,用于设置特定工作区的配色方案。

市场中的颜色主题

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

您可以通过在颜色主题选择器中选择 浏览更多颜色主题... 直接从 VS Code 市场上选择颜色主题。

颜色主题选择器的截图,突出显示从 VS Code 市场浏览主题的选项。

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

在扩展视图中搜索主题

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

Windows 和 macOS 支持浅色和深色主题。有一个设置,

Windows自动检测颜色方案
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
, 该指令使 VS Code 监听操作系统颜色主题的变化,并相应地切换到匹配的主题。

同样地,您可以使用

Windows自动检测高对比度
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
设置自动检测操作系统是否切换到高对比度配色方案。

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

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

设置编辑器过滤了首选颜色主题设置

定制颜色主题

工作台颜色

您可以使用 来自定义您的活动颜色主题

工作台颜色定制
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
编辑器.自定义标记颜色
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
用户 设置.

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

工作台颜色定制
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
输入:.

活动栏主题化

您可以在设置时使用IntelliSense

工作台颜色定制
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
值,或查看 主题颜色参考 以获取所有可定制颜色的列表。

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

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

如果一个定制适用于多个主题,您可以命名多个主题或使用输入:*作为名称开头和结尾的通配符:

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

如果一个主题设置了一个你不喜欢的颜色或边框,你可以使用默认将其恢复到原始值:

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

编辑器语法高亮

要调整编辑器的语法高亮颜色,请使用

编辑器.自定义标记颜色
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
在你的用户 设置 settings.json文件:

代币颜色定制

预配置的语法标记('comments','strings',...)适用于最常用的构造。如果你想更多,可以通过直接指定 TextMate 主题颜色规则来实现:

高级代币颜色自定义

注意

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

要定制特定主题,您可以按以下一种方法操作:

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

编辑器语义突出显示

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

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

没有语义突出显示

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

具有语义突出显示

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

  • 第10行:语言模式被参数化为一种颜色。
  • 第11行:范围职位被标记为类,并且文档作为参数。
  • 第13行:获取折叠范围被函数着色。

设置

编辑器.语义高亮.启用
  • 在 VS Code 中打开
  • 在 VS Code Insiders 中打开
作为是否应用语义突出显示的主要控制。它可以有值假的,和按主题配置输入:.

  • 假的将所有主题的语义突出显示打开或关闭。
  • 按主题配置是默认设置,允许每个主题控制是否启用语义高亮。所有 VS Code 自带的主题(例如,"Dark+"默认主题)默认启用语义高亮。

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

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

当语义突出显示启用并且对某种语言可用时,主题决定是否以及如何对语义标记进行着色。 一些语义标记是标准化的,并映射到成熟的 TextMate 范围。 如果主题为这些 TextMate 范围定义了着色规则,语义标记将使用该颜色进行渲染,不需要任何额外的着色规则。

附加样式规则可以在中配置editor.semanticTokenColorCustomizations输入:

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

要查看计算了哪些语义标记以及如何进行样式设置,您可以使用作用域检查器 (开发者:检查编辑器标记和作用域),它会显示当前光标位置文本的信息。

范围检查器

如果在给定位置的编程语言中可用的语义标记由主题启用,检查工具将显示一个部分语义标记类型。该部分显示语义标记信息(类型和任何数量的修饰符)以及适用的样式规则。

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

创建你自己的配色主题

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

VS Code 的 Yeoman 扩展生成器 帮助你生成剩余的扩展。

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

移除默认颜色主题

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

内置主题

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

禁用主题

文件图标主题

文件图标表示特定的文件类型。这些图标在资源管理器视图和标签页标题中显示在文件名旁边。文件图标主题可以由扩展提供。

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

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

  2. 使用键来浏览列表并预览主题的图标。

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

文件图标主题下拉菜单

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

VS Code 附带两个文件图标主题:MinimalSeti。要安装更多的文件图标主题,请选择文件图标主题选择器中的 安装其他文件图标主题 选项,这将打开扩展视图,并按图标主题过滤。

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

活动的文件图标主题保存在你的用户设置中 (键盘快捷键⌘, (Windows, LinuxCtrl+,)).

  // 指定在工作区中使用的文件图标主题。
  "workbench.iconTheme": "vs-seti"

创建你自己的文件图标主题

您可以从图标(最好为SVG格式)创建自己的文件图标主题,详见文件图标主题章节。

VS Code 用于网页

VS Code for the Web 提供了一个完全在您的浏览器中运行的免费、零安装 VS Code 体验,访问 https://vscode.dev.

您可以通过 VS Code for the Web 的 URL 模式来分享和体验色彩主题:https://vscode.dev/editor/theme/<extensionId>输入:.

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

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

产品图标主题

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

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

产品图标主题下拉菜单的截图,以及活动栏图标如何更改。

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

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

  2. 使用键来浏览列表并预览主题的图标。

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

默认情况下,VS Code 配备了一个产品图标主题,默认。您可以通过选择浏览更多产品图标主题...,直接从 VS Code 市场上选择更多产品图标主题。

下一步

主题只是定制 VS Code 的一种方法。如果您想了解更多关于 VS Code 定制和可扩展性的信息,请尝试这些文章:

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