主题
颜色主题
颜色主题使您可以修改 Visual Studio Code 用户界面的颜色，以匹配您的偏好和工作环境。颜色主题会影响 VS Code 用户界面元素和编辑器高亮颜色。
选择不同的颜色主题
-
选择 文件 > 首选项 > 主题 > 颜色主题 菜单项，或使用 首选项：颜色主题 命令 (⌘K ⌘T (Windows, Linux Ctrl+K Ctrl+T)) 以显示颜色主题选择器。
-
使用 向上 和 向下 键在列表中导航并预览主题的颜色。
-
选择您想要的主题并按 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 支持浅色和深色颜色方案。有一个设置，
同样，您可以使用
要自定义在颜色方案更改时使用的主题，您可以设置首选的浅色、深色和高对比度主题在设置编辑器中
- 工作区：首选深色颜色主题 - 默认值为深色现代
- 工作区：首选浅色颜色主题 - 默认值为浅色现代
- 工作区：首选高对比度颜色主题 - 默认值为深色高对比度
- 工作区：首选高对比度浅色颜色主题 - 默认值为浅色高对比度
自定义颜色主题
工作区颜色
您可以使用
要设置 VS Code UI 元素的颜色，例如列表和树（文件资源管理器、建议小部件）、差异编辑器、活动栏、通知、滚动条、拆分视图、按钮等，请使用
您可以在设置
要对特定主题进行自定义，请使用以下语法
"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 文件中
对于最常见的结构，提供了一组预配置的语法标记（'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被着色为函数。
设置
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 }
}
}
}
要查看计算出的语义标记以及如何对其进行样式设置，您可以使用作用域检查器（开发人员：检查编辑器标记和作用域），它会显示当前光标位置的文本信息。
如果给定位置的语言可用语义标记并由主题启用，则检查工具会显示一个 语义标记类型 部分。该部分显示语义标记信息（类型和任何数量的修饰符）以及适用的样式规则。
有关语义标记和样式规则语法的更多信息，请参阅 语义高亮指南。
创建自己的颜色主题
创建和发布主题扩展很容易。在您的用户设置中自定义颜色，然后使用 开发人员：从当前设置生成颜色主题 命令生成主题定义文件。
VS Code 的 Yeoman 扩展生成器 帮助您生成其余的扩展。
请参阅我们的扩展 API 部分中的 创建新的颜色主题 文章以了解更多信息。
移除默认颜色主题
如果您想从颜色主题选择器中删除 VS Code 随附的一些默认主题，您可以从扩展视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 中禁用它们。选择扩展视图顶部的 筛选扩展 按钮，选择 内置 选项，您将看到一个列出默认主题的 主题 部分。
您可以像禁用任何其他 VS Code 扩展 一样禁用内置主题扩展，方法是使用齿轮上下文菜单上的 禁用 命令。
文件图标主题
文件图标指示特定的文件类型。这些图标与文件资源管理器视图和选项卡标题中的文件名一起显示。文件图标主题可以由扩展贡献。
选择不同的文件图标主题
-
选择 文件 > 首选项 > 主题 > 文件图标主题 菜单项，或使用 首选项：文件图标主题 命令以显示文件图标主题选择器。
-
使用 向上 和 向下 键在列表中导航并预览主题的图标。
-
选择您想要的主题并按 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 在您的浏览器中完全运行的零安装 VS Code 体验，网址为 https://vscode.dev。
您可以通过 URL 架构通过 VS Code for the Web 分享和体验颜色主题：https://vscode.dev/editor/theme/<extensionId>。
例如，您可以访问 https://vscode.dev/editor/theme/sdras.night-owl 来体验 Night Owl 主题，而无需经过下载和安装过程。
您可以在 VS Code for the Web 文档 中了解更多关于预览和分享主题的信息。
产品图标主题
产品图标主题允许您更改 VS Code 用户界面中的图标，而不是特定文件类型的图标。例如，您可以修改活动栏中视图的图标，或者更改布局的标题栏中的图标。
请注意以下图像，当选择不同的产品图标主题时，活动栏图标是如何更新的。
要选择不同的产品图标主题
-
选择 文件 > 首选项 > 主题 > 产品图标主题 菜单项，或者使用 首选项：产品图标主题 命令来显示产品图标主题选择器。
-
使用 向上 和 向下 键在列表中导航并预览主题的图标。
-
选择您想要的主题并按 Enter。
默认情况下，VS Code 附带一个产品图标主题，即 默认。您可以直接从产品图标主题选择器中，通过选择 浏览更多产品图标主题... 来选择更多产品图标主题。
后续步骤
主题只是自定义 VS Code 的一种方式。如果您想了解更多关于 VS Code 定制和扩展的信息，请尝试阅读以下文章