主题
颜色主题
颜色主题使您能够修改 Visual Studio Code 用户界面中的颜色，以匹配您的个人偏好和工作环境。颜色主题既会影响 VS Code 的用户界面元素，也会影响编辑器的语法高亮颜色。
选择其他颜色主题
-
选择 文件 (File) > 首选项 (Preferences) > 主题 (Theme) > 颜色主题 (Color Theme) 菜单项，或使用 首选项: 颜色主题 (Preferences: Color Theme) 命令（⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)）来显示颜色主题选择器。
-
使用 向上 和 向下 键浏览列表并预览主题颜色。
-
选择您想要的主题并按 Enter 键。
当前生效的颜色主题存储在您的用户 设置 中（快捷键 ⌘, (Windows, Linux Ctrl+,)）。
// Specifies the color theme used in the workbench.
"workbench.colorTheme": "Solarized Dark"
来自市场（Marketplace）的颜色主题
VS Code 内置了多种颜色主题供您尝试。社区已将更多主题上传至 VS Code 扩展市场。
您可以通过颜色主题选择器中的 浏览其他颜色主题... (Browse Additional Color Themes...) 直接选择来自 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；若要获取所有可自定义颜色的列表，请参阅 主题颜色参考 (Theme Color Reference)。
要对特定主题进行自定义，请使用以下语法：
"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 。
预配置的一组语法标记（“注释”、“字符串”等）适用于最常见的构造。如果您想要更多自定义，可以直接指定 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)）中禁用它们。从扩展视图顶部选择 筛选扩展 (Filter Extensions) 按钮，选择 内置 (Built-in) 选项，您将看到一个列出默认主题的 主题 (THEMES) 部分。
您可以像对待任何其他 VS Code 扩展 一样，通过齿轮上下文菜单上的 禁用 (Disable) 命令来禁用内置主题扩展。
文件图标主题
文件图标指示特定的文件类型。这些图标显示在资源管理器视图的文件名旁和标签页标题中。文件图标主题可以由扩展贡献。
选择其他文件图标主题
-
选择 文件 (File) > 首选项 (Preferences) > 主题 (Theme) > 文件图标主题 (File Icon Theme) 菜单项，或使用 首选项: 文件图标主题 (Preferences: File Icon Theme) 命令来显示文件图标主题选择器。
-
使用 向上 和 向下 键浏览列表并预览主题图标。
-
选择您想要的主题并按 Enter 键。
默认情况下，使用 Seti 文件图标主题，这些图标即您在资源管理器视图中看到的图标。VS Code 会在重启后记住您的文件图标主题选择。您可以选择 无 (None) 来禁用文件图标。
VS Code 附带两个文件图标主题：Minimal 和 Seti。若要安装更多文件图标主题，请在文件图标主题选择器中选择 安装其他文件图标主题 (Install Additional File Icon Themes) 项，这将打开并筛选好图标主题的扩展视图。
您也可以直接浏览 VS Code 市场 网站查找可用的主题。
当前生效的文件图标主题存储在您的用户 设置 中（快捷键 ⌘, (Windows, Linux Ctrl+,)）。
// Specifies the file icon theme used in the workbench.
"workbench.iconTheme": "vs-seti"
创建您自己的文件图标主题
您可以使用图标（推荐 SVG 格式）创建自己的文件图标主题，详情请参阅我们扩展 API 部分中的 文件图标主题 文章。
Web 版 VS Code
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 用户界面中的图标，而非特定文件类型的图标。例如，您可以修改活动栏中视图的图标，或标题栏中用于更改布局的图标。
注意下图中，当选择不同的产品图标主题时，活动栏图标是如何更新的。
选择其他产品图标主题
-
选择 文件 (File) > 首选项 (Preferences) > 主题 (Theme) > 产品图标主题 (Product Icon Theme) 菜单项，或使用 首选项: 产品图标主题 (Preferences: Product Icon Theme) 命令来显示产品图标主题选择器。
-
使用 向上 和 向下 键浏览列表并预览主题图标。
-
选择您想要的主题并按 Enter 键。
默认情况下，VS Code 附带一个产品图标主题：Default。您可以在产品图标主题选择器中选择 浏览其他产品图标主题... (Browse Additional Product Icon Themes...)，从 VS Code 市场中直接选择更多产品图标主题。
后续步骤
主题只是自定义 VS Code 的一种方式。如果您想了解更多关于 VS Code 自定义和可扩展性的内容，请尝试阅读以下文章：
- 设置 - 了解如何通过用户和工作区设置将 VS Code 配置为您喜欢的样子。
- 代码片段 (Snippets) - 为您最喜爱的语言添加额外的代码片段。
- 扩展 API - 了解扩展 VS Code 的其他方式。
- 颜色主题 - 颜色主题扩展 API。
- 文件图标主题 - 文件图标主题扩展 API。