主题
颜色主题
颜色主题可让你修改 Visual Studio Code 用户界面中的颜色，以匹配你的偏好和工作环境。颜色主题会同时影响 VS Code 的用户界面元素和编辑器的语法高亮颜色。
选择不同的颜色主题
-
选择 文件 > 首选项 > 主题 > 颜色主题 菜单项，或使用 首选项: 颜色主题 命令 (⌘K ⌘T (Windows、Linux 为 Ctrl+K Ctrl+T)) 来显示颜色主题选择器。
-
使用 Up 和 Down 键在列表中导航并预览主题的颜色。
-
选择你想要的主题，然后按 Enter 键。
当前活动的颜色主题存储在你的用户设置中（快捷键 ⌘, (Windows、Linux 为 Ctrl+,)）。
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "Solarized Dark"
来自应用市场的颜色主题
VS Code 中有几种开箱即用的颜色主题供你尝试。社区已将更多主题上传到 VS Code 扩展应用市场。
你可以通过在颜色主题选择器中选择浏览其他颜色主题...，直接从 VS Code 应用市场中选择颜色主题。
或者，你可以在扩展视图（⇧⌘X (Windows、Linux 为 Ctrl+Shift+X)）的搜索框中使用 @category:"themes" 筛选器来搜索主题。
根据操作系统颜色方案自动切换
Windows 和 macOS 支持浅色和深色颜色方案。有一个设置 window.autoDetectColorScheme，它会指示 VS Code 监听操作系统颜色方案的变化，并相应地切换到匹配的主题。
同样，你可以使用 window.autoDetectHighContrast 设置来自动检测操作系统是否切换到了高对比度颜色方案。
要自定义颜色方案变化时使用的主题，你可以在设置编辑器中设置首选的浅色、深色和高对比度主题：
- Workbench: Preferred Dark Color Theme - 默认为 Dark Modern
- Workbench: Preferred Light Color Theme - 默认为 Light Modern
- Workbench: Preferred High Contrast Color Theme - 默认为 Dark High Contrast
- Workbench: Preferred High Contrast Light Color Theme - 默认为 Light High Contrast
自定义颜色主题
工作台颜色
你可以使用用户设置中的 workbench.colorCustomizations 和 editor.tokenColorCustomizations 来自定义当前活动的颜色主题。
要设置 VS Code UI 元素的颜色，例如列表和树（文件资源管理器、建议小部件）、差异编辑器、活动栏、通知、滚动条、拆分视图、按钮等，请使用 workbench.colorCustomizations。
在设置 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。
对于最常见的构造，提供了一组预配置的语法令牌（'comments', 'strings', ...）。如果你需要更多，可以直接指定 TextMate 主题颜色规则来实现。
直接配置 TextMate 规则是一项高级技能，因为你需要了解 TextMate 语法的工作原理。请参阅颜色主题指南了解更多信息。
要自定义特定主题，你可以通过以下方式之一进行：
"editor.tokenColorCustomizations": {
"[Monokai]": {
"comments": "#229977"
},
"[*Dark*]": {
"variables": "#229977"
},
"[Abyss][Red]": {
"keywords": "#f00"
}
}
编辑器语义高亮
某些语言（目前有：TypeScript、JavaScript、Java）提供语义令牌。语义令牌基于语言服务的符号理解，比来自 TextMate 语法的、由正则表达式驱动的语法令牌更准确。基于语义令牌计算出的语义高亮会叠加在语法高亮之上，可以修正和丰富高亮效果，如下例所示：
“Tomorrow Night Blue” 颜色主题，无语义高亮：
“Tomorrow Night Blue” 颜色主题，有语义高亮：
注意基于语言服务符号理解的颜色差异：
- 第 10 行：
languageModes被着色为参数。 - 第 11 行：
Range和Position被着色为类，document被着色为参数。 - 第 13 行：
getFoldingRanges被着色为函数。
设置 editor.semanticHighlighting.enabled 是控制是否应用语义高亮的主开关。它的值可以是 true、false 和 configuredByTheme。
true和false会为所有主题打开或关闭语义高亮。configuredByTheme是默认值，它让每个主题自己控制是否启用语义高亮。所有 VS Code 自带的主题（例如，默认的 "Dark+"）都默认启用了语义高亮。
你可以通过以下方式覆盖主题的设置：
"editor.semanticTokenColorCustomizations": {
"[Rouge]": {
"enabled": true
}
}
当语义高亮被启用并且对某种语言可用时，由主题来配置是否以及如何为语义令牌着色。一些语义令牌是标准化的，并映射到已建立的 TextMate 作用域。如果主题对这些 TextMate 作用域有颜色规则，那么这些语义令牌就会用该颜色渲染，而不需要任何额外的颜色规则。
可以在 editor.semanticTokenColorCustomizations" 中配置额外的样式规则。
"editor.semanticTokenColorCustomizations": {
"[Rouge]": {
"enabled": true,
"rules": {
"*.declaration": { "bold": true }
}
}
}
要查看计算出了哪些语义令牌以及它们的样式，你可以使用作用域检查器（Developer: Inspect Editor Tokens and Scopes），它会显示当前光标位置文本的信息。
如果给定位置的语言有可用的语义令牌，并且主题已启用该功能，检查工具会显示一个 semantic token type 部分。该部分显示语义令牌信息（类型和任意数量的修饰符）以及应用的样式规则。
有关语义令牌和样式规则语法的更多信息，可以在语义高亮指南中找到。
创建你自己的颜色主题
创建和发布主题扩展非常简单。在你的用户设置中自定义颜色，然后使用 Developer: Generate Color Theme From Current Settings 命令生成一个主题定义文件。
VS Code 的 Yeoman 扩展生成器可以帮助你生成扩展的其余部分。
请参阅我们扩展 API 部分中的创建新的颜色主题一文以了解更多信息。
移除默认颜色主题
如果你想从颜色主题选择器中移除一些 VS Code 自带的默认主题，你可以在扩展视图（⇧⌘X (Windows、Linux 为 Ctrl+Shift+X)）中禁用它们。选择扩展视图顶部的筛选扩展按钮，选择内置选项，你将看到一个 THEMES 部分，其中列出了默认主题。
你可以像禁用任何其他 VS Code 扩展一样，通过齿轮上下文菜单中的禁用命令来禁用内置主题扩展。
文件图标主题
文件图标指示特定的文件类型。这些图标会显示在资源管理器视图中的文件名旁边以及选项卡标题中。文件图标主题可以由扩展提供。
选择不同的文件图标主题
-
选择 文件 > 首选项 > 主题 > 文件图标主题 菜单项，或使用 首选项: 文件图标主题 命令来显示文件图标主题选择器。
-
使用 Up 和 Down 键在列表中导航并预览主题的图标。
-
选择你想要的主题，然后按 Enter 键。
默认情况下，使用 Seti 文件图标主题，这些就是你在资源管理器视图中看到的图标。VS Code 会在重启后记住你选择的文件图标主题。你可以通过选择无来禁用文件图标。
VS Code 自带两个文件图标主题：Minimal 和 Seti。要安装更多的文件图标主题，请在文件图标主题选择器中选择安装其他文件图标主题项，这会打开扩展视图，并按图标主题进行筛选。
你也可以直接浏览 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 在 https://vscode.dev 提供了一个免费、免安装、完全在浏览器中运行的 VS Code 体验。
你可以通过 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 用户界面中的图标，但不包括特定文件类型的图标。例如，你可以修改活动栏中视图的图标，或者标题栏中用于更改布局的图标。
请注意在下图中，当选择不同的产品图标主题时，活动栏图标是如何更新的。
选择不同的产品图标主题
-
选择 文件 > 首选项 > 主题 > 产品图标主题 菜单项，或使用 首选项: 产品图标主题 命令来显示产品图标主题选择器。
-
使用 Up 和 Down 键在列表中导航并预览主题的图标。
-
选择你想要的主题，然后按 Enter 键。
默认情况下，VS Code 自带一个产品图标主题：Default。你可以通过在产品图标主题选择器中选择浏览其他产品图标主题...，直接从 VS Code 应用市场中选择更多的产品图标主题。
后续步骤
主题只是自定义 VS Code 的一种方式。如果你想了解更多关于 VS Code 的自定义和可扩展性，可以试试这些文章：