创建并发布VS Code主题需先生成JSON配置，定义colors和tokenColors，通过F5预览调试，最后用vsce工具发布至市场。1. 使用“Generate Color Theme”命令或手动创建package.json和主题文件；2. 在themes文件夹中编辑mytheme-color-theme.json，设置界面色与语法高亮；3. 利用“Inspect Editor Tokens and Scopes”调试作用域；4. F5启动开发窗口实时测试；5. 安装vsce，登录并发布扩展。确保配色协调、scope覆盖全面，发布者账号提前注册，即可让主题上线供人下载使用。
想让你的代码编辑器看起来更个性、更舒适？创建并发布你自己的 VS Code 主题并不复杂，只需要一点 JSON 基础和清晰的设计思路。下面一步步带你完成整个流程。
1. 理解 VS Code 主题的结构
VS Code 主题本质上是一个 JSON 文件，定义了编辑器中各种元素的颜色和字体样式。它通过 scope 控制语法高亮，通过 tokenColorCustomizations 设置关键字、字符串、注释等的颜色。
主题分为两类：
- 颜色主题（Color Theme）：改变界面和代码颜色
- 图标主题（File Icon Theme）：改变资源管理器中的文件图标
我们这里主要讲颜色主题的创建。
2. 创建你的第一个主题
打开 VS Code，按下 Ctrl+Shift+P（Mac 上是 Cmd+Shift+P），输入 “Developer: Generate Color Theme From Current Settings”，回车。这会基于你当前的主题生成一个基础 JSON 配置。
或者手动创建：
- 新建一个文件夹，比如叫
my-awesome-theme - 在该文件夹下创建
package.json和themes/mytheme-color-theme.json
在 package.json 中添加基本信息：
{
"name": "my-awesome-theme",
"displayName": "My Awesome Theme",
"description": "A custom theme with a dark and cozy feel.",
"version": "0.0.1",
"engines": {
"vscode": "^1.85.0"
},
"categories": ["Themes"],
"contributes": {
"themes": [
{
"label": "My Awesome Theme",
"uiTheme": "vs-dark",
"path": "./themes/mytheme-color-theme.json"
}
]
}
}
uiTheme 可选 vs-dark（暗色）、vs（亮色）或 hc-black（高对比度）。
3. 编辑主题颜色
打开 mytheme-color-theme.json，它的结构如下：
云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..
{
"name": "My Awesome Theme",
"type": "dark",
"colors": {
"editor.background": "#1e1e1e",
"editor.foreground": "#d4d4d4",
"statusBar.background": "#007acc"
},
"tokenColors": [
{
"scope": ["comment"],
"settings": {
"foreground": "#6a9955",
"fontStyle": "italic"
}
},
{
"scope": ["string"],
"settings": {
"foreground": "#ce9178"
}
}
]
}
colors 控制界面颜色，如侧边栏、状态栏、面板背景等。
tokenColors 控制代码语法高亮，支持 TextMate 的 scope 规则。
你可以使用 VS Code 内置的 Scope Inspector 工具来查看当前光标处的语法作用域：
按 Ctrl+Shift+P → 输入 “Developer: Inspect Editor Tokens and Scopes” 即可实时调试。
4. 测试和预览主题
在你的主题文件夹中按下 F5，VS Code 会启动一个扩展开发窗口，里面加载了你的主题。可以在设置中切换到“My Awesome Theme”查看效果。
不断调整 tokenColors 和 colors，直到满意为止。建议从现有流行主题（如 One Dark Pro、Night Owl）中借鉴配色方案。
5. 发布到 Visual Studio Code Marketplace
要让别人也能安装你的主题，需要发布到官方扩展市场。
- 安装 vsce（VS Code Extension CLI）：
npm install -g vsce - 登录 marketplace.visualstudio.com 并创建一个 Personal Access Token（PAT）
- 使用 vsce 登录：
vsce login your-publisher-name - 打包并发布：
vsce publish
首次发布前需注册一个发布者（Publisher）。可以用 GitHub 账号登录创建。
发布成功后，你的主题就会出现在 VS Code 扩展市场，用户可通过搜索直接安装。
基本上就这些。不复杂但容易忽略细节，比如配色一致性、作用域覆盖完整性和发布账号配置。只要你有想法，就能做出独一无二的主题。试试看吧！
