1. VS Code界面颜色的基本设置
默认情况下，VS Code的界面是白色的，但我们可以根据自己的喜好和需求来改变它的颜色。我们可以在“文件 -> 首选项 -> 颜色主题”中选择一个我们喜欢的主题。VS Code自带了一些主题，比如“Dark+ (默认暗色主题)”，“Light+ (默认亮色主题)”，“High Contrast”等等。另外，我们也可以在VS Code MarketPlace中下载一些其他主题。下面是一些非常受欢迎的主题：
One Dark Pro
Atom One Dark Theme
Material Theme
Dracula Official
我们可以通过点击“文件 -> 首选项 -> 颜色主题”，然后在“颜色主题”的下拉列表中选择我们喜欢的主题。
当我们选择一个主题后，VS Code会自动保存我们的选择，无需手动保存。
2. 编辑器配色的设置
除了主题（也叫配色方案）之外，VS Code还允许我们自定义编辑器配色。在VS Code中，编辑器配色指的是文本颜色、背景颜色和其他元素的颜色，比如代码折叠线、行号、选中行等等。
要设置编辑器配色，我们需要创建一个新的JSON文件夹，并在其中编写配色方案。可以通过“文件 -> 首选项 -> 颜色主题 -> 配置文件”找到JSON文件夹的位置。
以下是一个编辑器配色设置的示例：
{
"workbench.colorCustomizations": {
"editor.background": "#1e1e1e",
"editor.lineHighlightBackground": "#252526",
"editorLineNumber.foreground": "#cfcfcf",
"editorLineNumber.activeForeground": "#ffffff",
"editorCursor.foreground": "#ffffff",
"editor.selectionBackground": "#d6d6d6",
"editor.inactiveSelectionBackground": "#7f7f7f",
"editor.selectionHighlightBorder": "#ffffff",
"editor.findMatchBackground": "#d6d6d6",
"editor.findMatchHighlightBackground": "#7f7f7f",
"editor.wordHighlightBackground": "#7f7f7f",
"editor.wordHighlightStrongBackground": "#7f7f7f",
"editorGroup.border": "#444444",
"editorGroup.dropBackground": "#ffffff",
"editorGroupHeader.tabsBackground": "#252526",
"editorGroupHeader.border": "#444444"
}
}
在这个示例中，我们改变了VS Code编辑器的背景颜色、行高亮的背景颜色、行号的前景色、当前行号的前景色、光标的颜色、选中文本的背景颜色、非活动选中文本的背景颜色、选中文本的边框颜色、查找匹配的背景颜色、匹配的高亮背景颜色、单词高亮的背景颜色、强调单词高亮的背景颜色、编辑器组边框的颜色、编辑器组中拖拽时的背景色以及编辑器组标题选项卡的背景色和边框颜色。
2.1 如何获取颜色代码
在上面的示例中，我们使用了一些十六进制颜色代码，如“#1e1e1e”、“#252526”等等。那么，如何获取这些代码呢？
我们可以使用在线颜色选择器，在颜色选择器中选择我们喜欢的颜色，然后将颜色代码复制到我们的JSON文件中。以下是一些受欢迎的在线颜色选择器：
2.2 在编辑器中应用自定义配色方案
在我们编辑好自己的配色方案之后，我们需要在VS Code中应用它。我们可以通过点击“文件 -> 首选项 -> 颜色主题 -> 配置文件”来打开JSON文件夹，在其中粘贴我们自己的配色方案。
然后，我们需要重启VS Code，以使更改生效。请注意，在我们重启了VS Code之后，我们需要再次选择我们喜欢的主题。这是因为我们的自定义配色方案只会生效于所选主题下。
3. 自定义主题颜色
如果我们想要更进一步地定制我们的VS Code主题，我们可以使用VS Code提供的自定义主题颜色选项。这样，我们可以很轻松地改变主题中的某些颜色，比如注释、关键字、函数名等等。
要自定义主题颜色，首先我们需要先安装一个插件叫做“Theme Color”，这个插件可以帮助我们更轻松地自定义主题颜色。
安装完插件后，我们需要在JSON文件夹中创建一个名为“theme-colors.json”的文件，并编写我们的自定义颜色方案。以下是一个自定义主题颜色的示例：
{
"workbench.colorCustomizations": {
"editorBracketMatch.background": "#f48fb1",
"editorBracketMatch.border": "#f48fb1",
"editorCodeLens.foreground": "#5e9ca0",
"editorCursor.foreground": "#6d4c41",
"editorGroupHeader.tabsBackground": "#f48fb1",
"editorHoverWidget.background": "#e6c1f2",
"editorSuggestWidget.background": "#e6c1f2",
"editorSuggestWidget.selectedBackground": "#f48fb1",
"editorWidget.background": "#f48fb1",
"diffEditor.insertedTextBackground": "#c5e1a5",
"diffEditor.removedTextBackground": "#ef9a9a",
"list.hoverBackground": "#f48fb1",
"list.activeSelectionBackground": "#f48fb1",
"tree.indentGuidesStroke": "#6d4c41",
"activityBar.border": "#f48fb1",
"sideBar.background": "#e1bee7",
"tab.activeBackground": "#ffffff",
"tab.border": "#f48fb1",
"tab.activeBorder": "#f48fb1",
"tab.activeForeground": "#6d4c41",
"tab.inactiveForeground": "#6d4c41",
"titleBar.activeBackground": "#f48fb1",
"titleBar.activeForeground": "#6d4c41",
"titleBar.inactiveBackground": "#e1bee7",
"titleBar.inactiveForeground": "#6d4c41"
}
}
在这个示例中，我们自定义了许多不同的编辑器元素的颜色。例如，我们使用“editorBracketMatch.background”和“editorBracketMatch.border”更改了匹配括号的背景色和边框颜色。我们使用“editorCursor.foreground”更改了光标的颜色。我们使用“tab.activeBackground”更改了当前处于活动状态的选项卡的背景颜色。
需要注意的是，我们需要在每个自定义颜色名之前放置“workbench.”前缀，“workbench.”是指VS Code的界面元素。
当我们编辑好自定义主题颜色之后，我们需要在我们的setttings.json文件中加入以下代码，以使用我们的自定义主题颜色：
"editor.tokenColorCustomizations": {
"[主题名称]": {
"colors": {
"workbench.xxx": "#xxxxxx",
...
}
}
}
在这个代码中，我们需要将[主题名称]替换为我们所选择的主题的名称，将workbench.xxx替换为我们想要更改的编辑器元素名，将#xxxxxx替换为我们自定义的颜色值。
4. 快速切换 VS Code 颜色主题
如果我们经常需要更改VS Code的颜色主题，我们可以使用“peacock”插件来实现快速切换。这个插件可以让我们为每个项目分配一个独特的颜色主题，这样我们就可以轻松地识别它们。
要使用“Peacock”插件，我们需要先在VS Code的扩展商店中搜索“Peacock”，然后安装它。在安装完毕之后，我们可以在VS Code的左侧边栏找到一个“Peacock”图标。
通过单击“Peacock”图标，我们可以打开一个窗口，允许我们更改当前项目的颜色主题，以及在每个新项目中默认使用哪个颜色主题。我们也可以使用窗口底部的搜索框来查找我们想要的颜色。
使用“Peacock”插件之后，我们可以轻松地识别我们的不同项目，而不必记住每个项目对应的颜色主题。
总结
VS Code的界面颜色是一个重要的设置，因为它可以帮助我们提高工作效率并让我们更舒适地工作。通过选择合适的主题和使用自定义配色方案，我们可以使VS Code适合我们的需求和喜好。同时，使用“peacock”插件可以让我们更快速地识别不同的项目。