主题
颜色主题
颜色主题使你能够修改 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" 筛选器来搜索主题。
根据 OS 颜色方案自动切换
Windows 和 macOS 支持浅色和深色方案。有一个设置 window.autoDetectColorScheme，它指示 VS Code 侦听 OS 颜色方案的更改并相应地切换到匹配的主题。
类似地，你可以使用 window.autoDetectHighContrast 设置来自动检测 OS 是否切换到高对比度颜色方案。
要自定义颜色方案更改时使用的主题，可以在设置编辑器中设置首选的浅色、深色和高对比度主题
- 工作台: 首选深色颜色主题 - 默认为深色现代
- 工作台: 首选浅色颜色主题 - 默认为浅色现代
- 工作台: 首选高对比度颜色主题 - 默认为深色高对比度
- 工作台: 首选高对比度浅色颜色主题 - 默认为浅色高对比度
自定义颜色主题
工作台颜色
你可以使用 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 }
}
}
}
若要查看计算了哪些语义令牌以及如何对其进行样式设置，可以使用范围检查器 (开发者: 检查编辑器令牌和范围)，它会显示当前光标位置处文本的信息。
如果给定位置的语言提供了语义令牌且主题已启用它，则检查工具会显示 语义令牌类型 部分。该部分显示语义令牌信息（类型和任意数量的修饰符）以及适用的样式规则。
有关语义令牌和样式规则语法的更多信息，请参阅语义突出显示指南。
创建自己的颜色主题
创建和发布主题扩展很简单。在用户设置中自定义颜色，然后使用 开发者: 从当前设置生成颜色主题 命令生成主题定义文件。
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
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 用户界面中的图标，特定文件类型的图标除外。例如，你可以修改活动栏中视图的图标，或标题栏中用于更改布局的图标。
注意在下图中选择不同的产品图标主题时，活动栏图标的更新情况。
选择不同的产品图标主题
-
选择 文件 > 首选项 > 主题 > 产品图标主题 菜单项，或使用 首选项: 产品图标主题 命令显示产品图标主题选取器。
-
使用 向上 和 向下 键在列表中导航并预览主题的图标。
-
选择所需的主题并按下 Enter。
默认情况下，VS Code 附带一个产品图标主题：Default。你可以直接从产品图标主题选取器中选择 VS Code 市场中的更多产品图标主题，方法是选择 浏览其他产品图标主题...。
后续步骤
主题只是自定义 VS Code 的一种方式。如果你想了解有关 VS Code 自定义和可扩展性的更多信息，请尝试阅读这些文章