主题
颜色主题
颜色主题允许您修改 Visual Studio Code 用户界面中的颜色以匹配您的偏好和工作环境。颜色主题会影响 VS Code 用户界面元素和编辑器突出显示颜色。
要选择不同的颜色主题
-
选择 文件 > 首选项 > 主题 > 颜色主题 菜单项,或使用 首选项:颜色主题 命令 (⌘K ⌘T (Windows、Linux Ctrl+K Ctrl+T)) 显示颜色主题选择器。
-
使用 上箭头 和 下箭头 键在列表中导航并预览主题的颜色。
-
选择所需的主题并按 回车键。
活动颜色主题存储在您的用户 设置 中(键盘快捷键 ⌘, (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.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 扩展 一样,使用齿轮上下文菜单上的 禁用 命令。
文件图标主题
文件图标指示特定文件类型。这些图标在资源管理器视图和选项卡标题中与文件名一起显示。文件图标主题可以由扩展贡献。
要选择不同的文件图标主题
-
选择 文件 > 首选项 > 主题 > 文件图标主题 菜单项,或使用 首选项:文件图标主题 命令来显示文件图标主题选择器。
-
使用 上箭头 和 下箭头 键在列表中导航并预览主题的图标。
-
选择所需的主题并按 回车键。
默认情况下,使用 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 用户界面中的图标,除了特定文件类型的图标。例如,您可以修改活动栏中视图的图标,或修改标题栏中用于更改布局的图标。
请注意以下图像中,当选择不同的产品图标主题时,活动栏图标是如何更新的。
要选择不同的产品图标主题
-
选择 文件 > 首选项 > 主题 > 产品图标主题 菜单项,或使用 首选项:产品图标主题 命令来显示产品图标主题选择器。
-
使用 上箭头 和 下箭头 键在列表中导航并预览主题的图标。
-
选择所需的主题并按 回车键。
默认情况下,VS Code 附带一个产品图标主题,默认。您可以直接从产品图标主题选择器中选择更多产品图标主题,方法是选择 浏览更多产品图标主题...。
后续步骤
主题只是自定义 VS Code 的一种方式。如果您想了解有关 VS Code 自定义和扩展性的更多信息,请尝试阅读以下文章