1. 主题概述为什么选择自己动手做一款深色主题作为一个每天要和代码编辑器打十几个小时交道的开发者我对编辑器的视觉体验有着近乎偏执的要求。市面上的主题成千上万从大名鼎鼎的 One Dark、Dracula到各种 Material 风格的变体我都试过不少。但总感觉差点意思要么是配色方案里总有一两种颜色让我觉得刺眼要么是语法高亮的对比度不够清晰长时间盯着看眼睛容易累。更重要的是我特别喜欢紫色——那种深邃、带点神秘感又不失科技感的紫色但在现有的主题里要么紫色用得过于“少女心”要么只是作为零星的点缀无法成为视觉焦点。于是一个念头冒了出来为什么不自己做一个呢这就是Hiraeth主题诞生的初衷。Hiraeth这个词本身带有一种对无法回归的故乡或过去的思念之情用在这里多少有点对我心目中“完美”编码环境的一种追寻和寄托。这个主题的核心定位非常明确一款以深色为基底以紫色作为强调色的 Visual Studio Code 主题。它不是为了取悦所有人而是完全基于我个人的审美和使用习惯打造的“私人订制”产物。如果你也厌倦了千篇一律的主题或者同样对紫色情有独钟那么我折腾的这套东西或许能给你一些启发甚至你可以直接拿去把它改造成你自己的专属主题。2. 设计思路与美学考量2.1 色彩体系的构建逻辑创建一个主题第一步也是最重要的一步就是定义色彩体系。这绝不是随便选几个好看的颜色那么简单它需要一套内在的逻辑来保证整体的和谐与功能性。我的起点是背景色。一个纯粹的、极深的灰色接近#0d1117被选作基础背景。它比纯黑#000000更柔和能有效减少屏幕与周围环境的亮度反差缓解视觉疲劳。同时它又足够“沉”能为前景的代码元素提供一个稳定、不抢戏的画布。接下来是前景色也就是代码文本的颜色。这里我采用了不同明度的灰色。主体代码如变量名、普通文本使用中灰色#c9d1d9确保在深色背景上有足够的、舒适的对比度WCAG AA 标准以上。注释则使用更暗的灰色#8b949e让它自然“退后”既提供信息又不干扰对主要代码的阅读。然后就是灵魂——紫色。我选择了两种紫色一种偏蓝调的、较深的紫色如#6e40c9用于关键字function,class,return等、类型和存储类const,let。这种紫色沉稳而有力能立刻抓住眼球标识出代码的结构关键点。另一种是更明亮、偏粉紫的色调如#d2a8ff用于函数名、方法调用和属性访问。当你在代码中调用一个函数时这一抹亮紫色就像是一个明确的路标让你快速定位到功能执行点。辅助色同样重要。我选用了一种柔和的青色#56d4dd表示字符串绿色#7ee787表示数字和布尔值橙色#ffa657表示操作符和标签。这些颜色与紫色主色调在色轮上形成互补或三角对比既能丰富色彩层次又不会喧宾夺主。注意色彩对比度是主题可用的生命线。我使用在线工具如 WebAIM Contrast Checker逐一校验了主要前景色与背景色的对比度确保其不低于 4.5:1以满足无障碍阅读的基本要求。这是对自己负责也是对潜在使用者负责。2.2 语法高亮分组的精细化设计VSCode 的语法高亮是通过 TextMate 语法规则或 Semantic Highlighting 来定义的。一个主题需要为数十种不同的“作用域”token scopes分配颜色。我的策略是“抓大放小保持一致”。结构层级优先首先确保keyword,storage.type,entity.name.function这些定义代码骨架的元素用最醒目的紫色突出。数据与值区分将字符串、数字、常量的颜色明确区分开。这有助于在调试或阅读逻辑时快速识别数据的类型。统一语言体验虽然不同语言的语法有差异但我会尽量让同类元素在不同语言中呈现一致的颜色。例如在 JavaScript、Python 和 Go 中function关键字都应该是同一种紫色。这减少了切换语言时的认知负担。淡化“噪音”元素括号、逗号、分号等标点符号我将其设置为与注释相近的暗灰色。它们是必要的但不应该是视觉的焦点。这个过程中我大量参考了 VSCode 内置的 Dark 主题和流行的 Community Material Theme 的作用域映射但完全按照我的紫色系偏好进行了重新着色。我会在编辑器中打开多种语言的文件JS/TS, Python, Go, HTML/CSS, JSON实时调整颜色并观察效果确保在大多数常见场景下都看起来顺眼。2.3 界面 UI 的协同风格化一个完整的主题不仅仅是代码区的色彩。侧边栏、状态栏、活动栏、输入框、按钮等 UI 组件如果风格割裂会严重影响沉浸感。Hiraeth在这方面也做了统一处理。工作台颜色我将侧边栏和活动栏的背景色设置为比主编辑器背景稍浅一点的深灰色#161b22形成微妙的层次感。选中的项目则用半透明的紫色背景高亮。编辑器组件滚动条滑块、缩略图滑块使用了紫色系。当前行高亮用了非常深的紫色透明背景rgba(110, 64, 201, 0.1)既提示了位置又不刺眼。状态栏背景色与侧边栏统一当有错误或警告时相应的状态项会变为警示色橙色或黄色而通常状态则保持中性。终端与调试控制台终端背景与编辑器一致确保从代码区看向终端时没有剧烈的亮度切换。同时为终端的 ANSI 色彩如错误红、成功绿配置了与主题色调相协调的变体避免出现过于艳俗的原色。所有这些 UI 颜色的配置都在主题的colors部分完成。VSCode 提供了非常详细的 颜色主题参考 定义了几百个颜色键。我的做法是先修改最核心的十几个键值看到整体效果后再根据需求去微调其他部分比如list.hoverBackground,button.background等。3. 从零到一主题开发实操全流程3.1 环境准备与项目初始化首先你需要一个基本的开发环境。确保你安装了最新版的 Visual Studio Code 和 Node.js 包含 npm。接下来我们将使用 VSCode 官方提供的 Yeoman 生成器来搭建主题项目骨架这是最规范、最省事的方式。打开终端执行以下命令安装生成器和初始化项目# 全局安装 Yeoman 和 VSCode 主题生成器 npm install -g yo generator-code # 创建一个空目录进入并运行生成器 mkdir hiraeth-theme cd hiraeth-theme yo code运行yo code后你会看到一个交互式命令行界面选择项目类型使用上下箭头选择New Color Theme。选择创建方式选择Start fresh从头开始这样我们能获得一个最干净的基础模板。输入主题信息主题名称输入Hiraeth。主题标识符输入hiraeth通常用小写这将是扩展的ID。主题描述输入A dark theme with purple accents.。颜色方案选择Dark。生成器还会问你是否要初始化 Git 仓库、用什么包管理器等根据你的习惯选择即可。完成后你的项目目录结构大致如下hiraeth-theme/ ├── .vscode/ │ └── launch.json # 调试配置 ├── themes/ │ └── hiraeth-color-theme.json # 主题的核心定义文件 ├── .gitignore ├── package.json # 扩展的清单文件 ├── README.md ├── CHANGELOG.md └── vsc-extension-quickstart.md现在用 VSCode 打开这个hiraeth-theme文件夹你的主题开发之旅就正式开始了。3.2 核心文件解析与编辑package.json与主题 JSON主题的核心是两个文件package.json和themes/hiraeth-color-theme.json。package.json这是你扩展的“身份证”和“说明书”。生成器已经帮你填好了大部分内容你需要关注的是contributes字段下的themes部分{ contributes: { themes: [ { label: Hiraeth, uiTheme: vs-dark, // 指明基于VSCode的深色UI主题 path: ./themes/hiraeth-color-theme.json // 主题文件路径 } ] } }label就是在主题选择下拉菜单里显示的名字。uiTheme必须设置为vs-dark因为我们开发的是深色主题。themes/hiraeth-color-theme.json这是重头戏所有颜色魔法都发生在这里。打开它你会看到一个 JSON 结构{ name: Hiraeth, type: dark, colors: { ... }, tokenColors: [ ... ] }colors: 这个对象用于定义工作台颜色即编辑器之外的UI部分侧边栏、状态栏、标签页等。键值对形式如editor.background: #0d1117。tokenColors: 这是一个数组用于定义语法高亮颜色。每个元素是一个规则对象通过scope指定作用域通过settings指定颜色和字体样式。初始文件里已经有一些示例颜色。我们的工作就是彻底重写这个文件用上一节设计思路中确定的色板来填充它。3.3 实时调试与预览F5 键的魔力这是主题开发中最爽的一环——实时预览。在 VSCode 中打开你的主题项目直接按下F5键。这会启动一个“扩展开发主机”窗口这是一个全新的、安装了你的未发布主题的 VSCode 实例。在这个新窗口里你可以打开各种语言的代码文件立即看到你的主题效果。回到主开发窗口修改hiraeth-color-theme.json文件。保存CtrlS后几乎瞬间扩展开发主机窗口中的主题就会更新无需重启。你可以同时打开一个 JavaScript 文件、一个 Python 文件和一个 Markdown 文件边改边看确保你的配色在不同语法环境下都表现良好。实操心得调试时建议在扩展开发主机窗口的settings.json中设置editor.tokenColorCustomizations: {}为空对象并关闭任何其他可能影响颜色的扩展如 Bracket Pair Colorizer以确保你看到的是纯粹由你的主题定义的效果。3.4 定义工作台颜色 (colors)我们从colors开始先搭建好整个编辑器的“舞台”。以下是我在Hiraeth中使用的一部分关键颜色定义你可以以此为蓝本进行修改colors: { // 核心背景色 focusBorder: #6e40c9, // 焦点边框用紫色 foreground: #c9d1d9, // 默认前景色文本 disabledForeground: #484f58, // 禁用状态文本色 widget.shadow: #00000080, // 小组件阴影 selection.background: #6e40c966, // 文本选中背景紫色半透明 // 编辑器背景与线条 editor.background: #0d1117, editor.foreground: #c9d1d9, editorLineNumber.foreground: #6e7681, // 行号浅灰色 editorLineNumber.activeForeground: #d2a8ff, // 当前行号亮紫色 editorCursor.foreground: #6e40c9, // 光标紫色 editor.selectionBackground: #6e40c940, // 选择区域背景 editor.selectionHighlightBackground: #6e40c920, // 选择高亮背景 editor.wordHighlightBackground: #6e40c915, // 单词高亮背景 editor.lineHighlightBackground: #6e40c910, // 当前行高亮背景 // 侧边栏与活动栏 sideBar.background: #161b22, sideBar.foreground: #c9d1d9, sideBarSectionHeader.background: #0d1117, sideBarTitle.foreground: #d2a8ff, activityBar.background: #161b22, activityBar.foreground: #d2a8ff, activityBar.activeBorder: #6e40c9, // 活动项指示条紫色 // 状态栏 statusBar.background: #161b22, statusBar.foreground: #c9d1d9, statusBarItem.hoverBackground: #30363d, statusBar.debuggingBackground: #6e40c9, // 调试时状态栏变紫色 // 标签页 tab.activeBackground: #0d1117, tab.activeForeground: #ffffff, tab.inactiveBackground: #161b22, tab.inactiveForeground: #8b949e, tab.border: #30363d, // 输入框、按钮、下拉菜单 input.background: #21262d, input.foreground: #c9d1d9, input.border: #30363d, inputOption.activeBorder: #6e40c9, button.background: #21262d, button.foreground: #c9d1d9, button.hoverBackground: #30363d, dropdown.background: #21262d, dropdown.border: #30363d }定义完colors后保存切换到扩展开发主机窗口你应该能看到整个编辑器的 UI 风格除了代码颜色已经变成了你定义的深灰紫色调。3.5 定义语法高亮 (tokenColors)这是主题的“血肉”决定了代码本身的观感。tokenColors是一个规则数组VSCode 会从上到下匹配后面的规则可以覆盖前面的。因此通常把通用规则放前面具体语言的特殊规则放后面。以下是一个精简但功能完整的tokenColors示例涵盖了大多数编程语言的核心元素tokenColors: [ // 1. 通用文本与注释最低优先级 { name: Text and Comments, scope: [text, source, comment, punctuation.definition.comment], settings: { foreground: #8b949e // 注释用暗灰色 } }, // 2. 字符串优先级高于普通文本 { name: Strings, scope: [string, constant.other.symbol], settings: { foreground: #56d4dd // 青色 } }, // 3. 数字与常量 { name: Numbers and Constants, scope: [constant.numeric, constant.language, constant.character, constant.other], settings: { foreground: #7ee787 // 绿色 } }, // 4. 关键字、存储类型与修饰符核心紫色区 { name: Keywords and Storage, scope: [ keyword, storage, storage.type, modifier ], settings: { foreground: #6e40c9, // 深紫色 fontStyle: // 可以是 或 italic } }, // 5. 函数、类、类型名 { name: Function and Class Names, scope: [ entity.name.function, entity.name.type.class, entity.name.type, support.type, support.class ], settings: { foreground: #d2a8ff // 亮紫色 } }, // 6. 变量与属性 { name: Variables and Properties, scope: [ variable, variable.parameter, variable.other, variable.object.property, support.variable ], settings: { foreground: #c9d1d9 // 默认前景色 } }, // 7. 操作符与标签 { name: Operators and Tags, scope: [keyword.operator, entity.name.tag], settings: { foreground: #ffa657 // 橙色 } }, // 8. 标点符号淡化处理 { name: Punctuation, scope: [ punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace ], settings: { foreground: #6e7681 // 浅灰色接近行号 } }, // 9. Markdown 特定规则示例可覆盖通用规则 { name: Markdown Headers, scope: markup.heading, settings: { foreground: #6e40c9, fontStyle: bold } }, { name: Markdown Links, scope: markup.underline.link, settings: { foreground: #56d4dd, fontStyle: underline } } ]编写tokenColors时最大的挑战是理解“作用域”scope。VSCode 内置了一个非常实用的命令“Developer: Inspect Editor Tokens and Scopes”在命令面板中搜索。在扩展开发主机窗口中将光标放在任意代码符号上运行此命令会弹出一个面板显示该位置精确的作用域列表。这是你调试和编写规则的最强工具。4. 进阶调优与发布准备4.1 针对特定语言的微调通用规则能覆盖70%的场景但一些语言有独特的语法结构需要特别关照。例如JavaScript/TypeScript可能需要为console.log这样的support.function单独设色或者为装饰器decorator设置规则。CSS/LESS/SCSS属性名property-name和值property-value可能需要不同颜色。选择器entity.other.attribute-name也可以高亮。JSON/YAML键string.key和值可以区分颜色。你可以通过复制通用规则并修改scope字段来创建针对特定语言的规则。VSCode 的 Scope Inspector 工具在这里同样不可或缺。4.2 添加主题变体可选一个主题可以有多个变体比如一个深色版一个深色更高对比度版。你可以在package.json的contributes.themes数组中添加多个主题定义指向不同的 JSON 文件或同一个文件但通过uiTheme和内部type区分。contributes: { themes: [ { label: Hiraeth, uiTheme: vs-dark, path: ./themes/hiraeth-color-theme.json }, { label: Hiraeth (High Contrast), uiTheme: vs-dark, path: ./themes/hiraeth-hc-color-theme.json } ] }高对比度版本通常需要进一步拉大前景与背景的亮度差并可能使用更饱和的颜色。4.3 测试与质量检查在发布前需要进行系统性测试多语言测试在扩展开发主机中创建测试文件覆盖你常用的所有语言.js,.ts,.py,.go,.java,.html,.css,.json,.md等。UI 全面检查打开设置、命令面板、问题面板、终端、调试控制台、源代码管理视图等所有界面检查颜色是否协调文字是否清晰可读。边缘情况测试长行、折叠代码、查找高亮、错误波浪线、警告提示、内联提示inline hint等场景。对比度验证使用浏览器开发者工具的颜色拾取器或者专门的对比度检查插件抽样检查主要文本与背景的对比度是否达标。4.4 打包与发布到 VSCode 市场当你对主题满意后就可以准备发布了。更新元信息仔细填写package.json中的description,repository,keywords可以加上theme,dark-theme,purple等以及README.md文件添加主题的截图和介绍。安装 vsceVSCode 扩展打包工具。npm install -g vscode/vsce打包在项目根目录运行。vsce package这会生成一个.vsix文件这是你的扩展安装包。发布你需要一个 Azure DevOps 账户。在 Visual Studio Marketplace 发布者管理页面 创建一个发布者例如我用的是mosescommitsfraud这只是一个占位符名称。使用vsce登录并发布vsce login 你的发布者名称 vsce publish发布后你的主题就会出现在 VSCode 市场的扩展列表中任何人都可以搜索并安装了。5. 常见问题与排查技巧实录在开发Hiraeth的过程中我踩过不少坑也总结了一些排查问题的经验。5.1 颜色不生效或显示异常这是最常见的问题。排查步骤如下检查 JSON 语法一个多余的逗号或缺少的引号都会导致整个主题文件失效。使用 VSCode 的 JSON 验证功能右下角状态栏或者在线 JSON 校验工具。确认作用域使用“Developer: Inspect Editor Tokens and Scopes”命令确保你编写的scope字符串与编辑器识别出的作用域完全匹配。作用域是层级式的你可以写一个父级作用域如variable来匹配所有子级如variable.parameter。规则顺序tokenColors数组是顺序匹配的。如果你把通用规则如text放在很后面它可能会覆盖前面更具体的规则。通常顺序是最通用的放最后或最前面但范围最小。缓存问题有时 VSCode 的主题引擎会有缓存。尝试在扩展开发主机中执行命令“Developer: Reload Window”来强制刷新。冲突扩展禁用其他主题类或语法高亮扩展如Bracket Pair Colorizer,Color Highlight看是否是扩展冲突。5.2 工作台颜色 (colors) 不更新如果你修改了colors中的值但没看到变化确保你修改的是正确的颜色键。键名非常具体可以参考 官方文档 。某些 UI 颜色可能由多个键共同控制或者受操作系统/桌面环境主题的影响特别是标题栏颜色titleBar.activeBackground。同样尝试重载窗口。5.3 发布失败或市场显示问题问题可能原因解决方案vsce publish失败提示未登录未登录或登录过期运行vsce login publisher重新登录发布失败提示版本号已存在package.json中的version未更新遵循语义化版本控制更新版本号如 0.1.0 - 0.1.1市场页面没有截图或描述不对README.md格式不对或图片链接失效使用相对路径引用本地图片确保 Markdown 语法正确扩展安装后无法选择package.json中engines.vscode版本过高降低版本号如^1.60.0以兼容更多用户5.4 主观感受调整太刺眼或太沉闷这是审美问题因人而异但有一些调整方向感觉太刺眼通常是饱和度太高或亮度对比太强。尝试将你的强调色如紫色#6e40c9的饱和度S值或亮度L值调低。在 HSL 色彩模型中微调会更直观。感觉太沉闷/对比度不够提高前景色如#c9d1d9的亮度或者降低背景色如#0d1117的亮度。确保主要文本的对比度在 4.5:1 以上。颜色太多太花哨减少使用的色彩数量。例如将操作符、标签的颜色也统一为某一种灰色或紫色变体只保留关键字、函数、字符串、数字这四类核心元素的高亮色。5.5 分享与获取反馈将主题发布到 GitHub 是一个好习惯。创建一个仓库将代码推上去。在README.md中提供清晰的安装说明无论是通过市场还是手动安装.vsix文件和多张高质量的截图展示不同语言和界面的效果。鼓励用户提交 Issue 来反馈问题比如在某种特定语法下高亮异常。这能帮助你持续改进主题。同时明确声明你的主题是“个人偏好”的产物就像我在最初的Disclaimer里写的那样这能管理好用户的预期。开发一个属于自己的 VSCode 主题从设计、编码、调试到发布整个过程就像在精心布置自己的数字书房。每一次对颜色的微调每一次看到代码在自己定义的颜色下变得清晰悦目都是一种独特的满足感。Hiraeth对我来说已经不仅仅是一个主题它是我工作流中一个充满个人印记的部分。如果你也心动了不妨就从这个最简单的深色紫色方案开始动手打造属于你自己的那一份“思念”吧。记住最好的主题就是那个让你看着最舒服、敲代码最顺手的主题。