先创建配色主题项目并配置package.json，再定义themes目录下的json文件，通过colors设置ui颜色、TokenColors调整语法高亮，最后按F5调试预览效果。

想让 vscode 看起来更符合自己的审美或使用习惯？自定义主题是个好选择。不需要从零开始，VSCode 提供了完整的机制让你轻松创建和修改主题。下面一步步带你实现属于你自己的代码主题。

理解 VSCode 主题类型

VSCode 支持三种主要的自定义界面颜色类型：

• Color Theme（配色主题）：控制编辑器语法高亮、侧边栏、状态栏等 UI 颜色。
• File Icon Theme（文件图标主题）：定义资源管理器中不同文件类型的图标样式。
• Product Icon Theme（产品图标主题）：更改工具栏、操作按钮等内置图标的外观。

本文重点讲 Color Theme 的制作。

创建一个基础配色主题

打开你的项目文件夹或新建一个用于存放主题的目录，然后执行以下步骤：

1. 运行 npm init -y 初始化项目（可选，便于发布到插件市场）。
2. 创建 package.json 并添加 contributes 字段来声明主题。
3. 在项目中新建 themes/ 文件夹，并添加你的主题文件，例如 my-theme-color-theme.json。

示例 package.json 配置：

<font face="Courier New"> {   "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"       }     ]   } } 

说明：

猫眼课题宝

5分钟定创新选题，3步生成高质量标书！

25

查看详情

• label 是你在 VSCode 中看到的主题名称。
• uiTheme 决定整体界面风格：vs-dark（深色）、vs（浅色）、hc-black（高对比度）。
• path 指向你的主题 JSON 文件。

编写主题 JSON 文件

主题的核心是定义各种作用域的颜色。你可以覆盖编辑器背景、字体颜色、括号高亮、侧边栏样式等。

示例 my-theme-color-theme.json：

<font face="Courier New"> {   "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 名称，据此调整你的主题规则。

基本上就这些。掌握结构后，你可以基于现有主题（如 One Dark Pro、Nord）导出配置再修改，更快上手。主题制作不复杂但容易忽略细节，关键是多试、多看 scope 信息。