先创建配色主题项目并配置package.json，再定义themes目录下的JSON文件，通过colors设置UI颜色、tokenColors调整语法高亮，最后按F5调试预览效果。
想让 VSCode 看起来更符合自己的审美或使用习惯？自定义主题是个好选择。不需要从零开始，VSCode 提供了完整的机制让你轻松创建和修改主题。下面一步步带你实现属于你自己的代码主题。
理解 VSCode 主题类型
VSCode 支持三种主要的自定义界面颜色类型：
- Color Theme（配色主题）：控制编辑器语法高亮、侧边栏、状态栏等 UI 颜色。
- File Icon Theme（文件图标主题）：定义资源管理器中不同文件类型的图标样式。
- Product Icon Theme（产品图标主题）：更改工具栏、操作按钮等内置图标的外观。
本文重点讲 Color Theme 的制作。
创建一个基础配色主题
打开你的项目文件夹或新建一个用于存放主题的目录，然后执行以下步骤：
- 运行
npm init -y初始化项目（可选，便于发布到插件市场）。 - 创建
package.json并添加contributes字段来声明主题。 - 在项目中新建
themes/文件夹，并添加你的主题文件，例如my-theme-color-theme.json。
示例 package.json 配置：
{
"name": "my-custom-theme",
"displayName": "My Custom Theme",
"description": "A personalized dark theme",
"version": "0.0.1",
"engines": {
"vscode": "^1.80.0"
},
"contributes": {
"themes": [
{
"label": "My Custom Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-theme-color-theme.json"
}
]
}
}
说明：
-
label是你在 VSCode 中看到的主题名称。 -
uiTheme决定整体界面风格：vs-dark（深色）、vs（浅色）、hc-black（高对比度）。 -
path指向你的主题 JSON 文件。
编写主题 JSON 文件
主题的核心是定义各种作用域的颜色。你可以覆盖编辑器背景、字体颜色、括号高亮、侧边栏样式等。
示例 my-theme-color-theme.json：
{
"name": "My Custom Theme",
"type": "dark",
"colors": {
"editor.background": "#1e1e2e",
"editor.foreground": "#cdd6f4",
"statusBar.background": "#181825",
"sideBar.background": "#1e1e2e",
"tab.activeBackground": "#1e1e2e",
"activityBar.background": "#181825"
},
"tokenColors": [
{
"scope": ["comment", "punctuation.definition.comment"],
"settings": {
"foreground": "#6c7086",
"fontStyle": "italic"
}
},
{
"scope": "string",
"settings": {
"foreground": "#a6e3a1"
}
},
{
"scope": "keyword",
"settings": {
"foreground": "#f38ba8",
"fontStyle": "bold"
}
},
{
"scope": "variable",
"settings": {
"foreground": "#cba6f7"
}
}
]
}
关键字段解释：
-
colors：控制 UI 元素颜色，比如编辑器背景、状态栏等。 -
tokenColors：控制代码语法着色，通过scope匹配语言标记（如 keyword、string），settings定义颜色和字体样式。 -
scope可以是单一值或数组，支持通配符和嵌套结构（参考 TextMate 语法）。
调试与应用主题
开发过程中，无需发布即可预览效果：
- 用 VSCode 打开你的主题项目。
- 按 F5 启动扩展主机（Extension Host），会打开一个新的 VSCode 窗口。
- 在新窗口中，通过命令面板（Ctrl+Shift+P）输入 “Preferences: Color Theme”，选择你的主题名称即可切换。
- 修改 JSON 后重新加载窗口（Ctrl+R）查看变化。
如果发现某些语法没生效，可以使用 VSCode 内置的开发者工具辅助定位：
- 打开命令面板，运行 “Developer: Inspect Editor Tokens and Scopes”。
- 鼠标悬停在代码上，查看当前 token 的
scope名称，据此调整你的主题规则。
