简介VS Code雅蓝配色主题是一份面向代码编辑器的轻量主题资源移植自HbuilderX中广受好评的雅蓝主题能够有效缓解长时间写代码时的视觉疲劳并让代码结构更加清晰易读。压缩包体积仅7千字节内含3个JSON文件分别承载主题颜色定义、扩展配置和国际化文本说明安装后即可被编辑器自动识别使用十分便捷。目前已有2457人学习下载适合追求清爽编程环境的前端、后端及全栈开发者。主题以深蓝色为背景搭配柔和的淡色文字并对关键字、注释、字符串、变量等语法元素施以鲜明而不刺眼的颜色区分有助于快速定位逻辑区块同时支持在VS Code中继续调整字号、行距和代码折叠等细节让每位开发者都能按习惯二次定制。整体而言这是一份即取即用、轻巧无负担的配色方案尤其适合需要对编辑器外观进行统一升级的日常开发场景。1. 雅蓝配色主题先想清楚你要改的是 UI 还是语法高亮深夜改 C 代码默认 Dark 看久了眼睛发酸换过的第三方主题不少总有几处语法高亮是串色的团队四个人四种主题截个 diff 图互相看不懂在讨论哪一行。这是大多数 VSCode 用户换配色主题的真实动机不是嫌默认皮肤丑而是想要一套「蓝灰色系、明度克制、重点信息不靠鲜艳硬撑」的视觉语言这就是雅蓝配色主题要解决的问题。它既可以是你在扩展市场找到的一款主题也可以是你用 VSCode 自带的定制能力自己造出来的一套配置。适合长期写代码、对暗色主题审美疲劳、以及想统一团队视觉但不想被默认主题绑架的人。这篇按「机制 → 配置 → 自制扩展 → 踩坑 → 校准」的顺序讲保证你读完能自己把雅蓝落地。2. VSCode 主题的机制颜色坐标系和优先级雅蓝落地前必须知道的2.1 主题文件里那 300 多个键colors 和 tokenColors 是两套坐标系VSCode 的配色主题表面上是一个 JSON 文件实际上同时管着两套互不相干的颜色系统。第一套是colors管的是编辑器的「皮肤」背景、前景、光标、行高亮、侧边栏、状态栏、标题栏、标签页、输入框、终端背景、按钮包括滚动条、错误波浪线、括号配对颜色都在这一层。这套键的数量非常多官方主题里通常有 300 多个但你日常改来改去就用得上其中 30 个左右。第二套是tokenColors管的是编辑器里「代码」的颜色注释什么色、关键字什么色、字符串什么色、函数名什么色。它基于 TextMate 语法的作用域scope来匹配一套典型的 tokenColors 有几十条 scope 规则。两套坐标系的优先级也得搞清楚。如果用户没做任何覆盖主题文件里的colors和tokenColors说了算一旦你在settings.json里写了workbench.colorCustomizations它会覆盖主题里对应的颜色键再往上还有针对某个指定主题的覆盖写法。很多人在配置雅蓝时翻车就是因为只改了colors没动tokenColors结果界面蓝了代码里注释还是主题给的橙色。2.2 雅蓝色阶怎么定先把一套 8 色板画出来所谓「雅蓝」核心不是蓝而是「雅」整体是低饱和的蓝灰色系拉开层次靠明度而不是靠色相跳跃。我一般会先把一套色板定下来再动手而不是凭感觉逐个填。下面是我常用的示范色板方向你可以直接抄也可以在此基础上微调角色色值用途编辑器底#0F1B2B主背景偏深海军蓝面板底#0C1522侧栏、状态栏、标题栏底色前景#C6D4E0正文淡蓝灰注释#6A7D94灰蓝刻意降低存在感关键字#58A6FF亮青蓝视觉锚点字符串#9BD8B5淡青绿与蓝形成温和对比数字#D2A8FF淡紫只做弱强调函数名#83C5FF比关键字浅一点区分层级类型/类#7DD3C0薄荷青用于类型标识光标#58A6FF与关键字同色系选中背景#1F3B5FFF带透明度的蓝不刺眼行高亮#16273F比背景亮一档即可配色时有个容易犯的毛病直接从取色器里挑几个好看的颜色拼一起结果明度完全没梯度。雅蓝这类冷色主题的正确做法是控制 HSL 里的 H色相在 200-220 度之间S饱和度控制在 30%-70%L明度从 12% 到 75% 拉开梯度。明度一致的蓝会糊成一团。2.3 怎么快速看一个主题的「配方」从默认主题抄键名如果你想拿现成主题当底子改最常见做法是直接看那个主题的 JSON 文件。VSCode 的扩展安装在用户目录下的.vscode/extensions里主题扩展里通常能找到themes/文件夹下的.json文件打开就能看到它的colors和tokenColors是怎么写的。我通常只记住最常用的十几个键名就够了editor.background、editor.foreground、editorCursor.foreground、editor.lineHighlightBackground、editor.selectionBackground、activityBar.background、sideBar.background、statusBar.background、tab.activeBackground。其余键名需要时用命令面板搜「Preferences: Open Color Theme JSON」看当前主题的完整文本或者干脆用后面第 6 章的 Inspect 工具反查。别试图把 300 多个键全背下来那是浪费时间。3. 用 settings.json 把任意主题改成雅蓝最小改动与验证3.1 最小改动workbench.colorCustomizations 覆盖高频区域如果你不想装任何新扩展也懒得自己维护一个主题工程直接在settings.json里写workbench.colorCustomizations是最快路径。先打开设置文件命令面板CtrlShiftP→ Preferences: Open User Settings (JSON)。然后追加这么一段{ workbench.colorCustomizations: { editor.background: #0F1B2B, editor.foreground: #C6D4E0, editorCursor.foreground: #58A6FF, editor.lineHighlightBackground: #16273F, editor.selectionBackground: #1F3B5F, activityBar.background: #0C1522, activityBar.foreground: #C6D4E0, activityBarBadge.background: #58A6FF, sideBar.background: #0C1522, sideBar.foreground: #C6D4E0, statusBar.background: #0C1522, statusBar.foreground: #C6D4E0, tab.activeBackground: #0F1B2B, tab.activeForeground: #FFFFFF, tab.inactiveBackground: #0C1522, editorGroupHeader.tabsBackground: #0C1522 } }这段配置干了三件事把编辑器主体换成深蓝灰底、把外壳顶栏、侧栏、状态栏、标签页压成一个更深的蓝灰色、把光标和角标这类「需要被看见」的元素提亮成青蓝。注意editor.selectionBackground我用了#1F3B5F这是带透明度的写法后面两位FF是 alpha 值可以让选中区域透出一点点背景不会像纯色块那么厚重。如果你想只对某个主题生效还可以写成[One Dark Pro]: {...}这种带主题名包裹的写法VSCode 只会在你切换到对应主题时应用这段覆盖。这个特性在团队协作时特别有用大家的主题可以不一样但雅蓝的 UI 关键色保持一致。3.2 让语法高亮也蓝起来editor.tokenColorCustomizations 的写法改完 UI 色之后你会发现注释还是原来的绿、字符串还是原来的橙。这是因为上一节只改了colors没管tokenColors。语法高亮的覆盖要走另一个入口{ editor.tokenColorCustomizations: { comments: #6A7D94, keywords: #58A6FF, strings: #9BD8B5, numbers: #D2A8FF, functions: #83C5FF, types: #7DD3C0 } }这是最简单的写法VSCode 把常见的语义角色comments、keywords、strings、numbers、functions、types做了顶层快捷配置不需要写 scope。但它的缺点是控制粒度粗比如「关键字」会把if、for、return和int、const这类类型关键字全部染成一个颜色而很多主题里这两类是刻意区分开的。想要更精细的控制得用完整的 scope 写法{ editor.tokenColorCustomizations: { textMateRules: [ { scope: [comment, comment.block, comment.line], settings: { foreground: #6A7D94, fontStyle: italic } }, { scope: [keyword.control, keyword.operator, storage.type], settings: { foreground: #58A6FF } }, { scope: [string, string.quoted.single, string.quoted.double], settings: { foreground: #9BD8B5 } }, { scope: [constant.numeric, constant.language], settings: { foreground: #D2A8FF } }, { scope: [entity.name.function, meta.function-call], settings: { foreground: #83C5FF } }, { scope: [entity.name.type, entity.name.class], settings: { foreground: #7DD3C0 } } ] } }为什么注释要把comment.block和comment.line单独列出来因为在 C/C 这种语言里块注释和行注释在 TextMate 里作用域不同只写comment有时会漏匹配。经验是scope 匹配遵循「最长前缀优先」你列出的 scope 越具体优先级越高所以拿不准时就往细了写。3.3 改完不生效先查这三件事第一件settings.json是 jsonc 格式允许注释和尾逗号但如果你手滑把键名写错了VSCode 会静默忽略而不是报错。第二件改完配置不会立刻生效要执行命令面板里的 Developer: Reload Window看到整个窗口闪一下才说明重新加载了。第三件如果你发现某些 token 的颜色改了但另一些纹丝不动多半是语义高亮Semantic Highlighting在接管。VSCode 对 TypeScript、Python 这类有语言服务器的语言会额外下发语义 token 覆盖 TextMate 的配色这一层由editor.semanticTokenColorCustomizations控制后面踩坑章节会细说。4. 自己写一个雅蓝主题扩展从 package.json 到 F5 调试4.1 工程结构package.json themes/雅蓝-color-theme.json 就够当你发现 settings.json 里的方式已经满足不了需求——比如你要给团队分发、要控制所有 300 多个颜色键、要把主题名写进状态栏的切换列表——就该把它做成一个真正的扩展。这个工程极简就两个文件加一个启动配置my-yalan-theme/ ├── .vscode/ │ └── launch.json ├── package.json └── themes/ └── yalan-color-theme.json先看package.json这里声明了扩展的基本信息和主题入口{ name: my-yalan-theme, displayName: Yalan Blue Theme, version: 0.1.0, engines: { vscode: ^1.75.0 }, categories: [Themes], contributes: { themes: [ { label: Yalan Blue, uiTheme: vs-dark, path: ./themes/yalan-color-theme.json } ] } }uiTheme有三个可选值vs对应浅色主题、vs-dark对应深色主题、hc-black对应高对比度。雅蓝是暗色主题所以用vs-dark。path是主题文件相对于 package.json 的路径注意格式是./themes/xxx.json别漏了开头的./。引擎版本号按你本机 VSCode 版本写一般写个^1.75.0这种范围就行低于这个版本的用户装不上这是兜底保护。4.2 配色文件字段逐个过name/type/colors/tokenColorsyalan-color-theme.json是主题的核心本质上是把第 3 章写在 settings.json 里的两段东西搬进来外加更多细节。一个能用的最小版本长这样{ name: Yalan Blue, type: dark, colors: { editor.background: #0F1B2B, editor.foreground: #C6D4E0, editorCursor.foreground: #58A6FF, editor.lineHighlightBackground: #16273F, editor.selectionBackground: #1F3B5F, activityBar.background: #0C1522, activityBar.foreground: #C6D4E0, activityBarBadge.background: #58A6FF, sideBar.background: #0C1522, sideBar.foreground: #C6D4E0, statusBar.background: #0C1522, statusBar.foreground: #C6D4E0, tab.activeBackground: #0F1B2B, tab.activeForeground: #FFFFFF, tab.inactiveBackground: #0C1522, editorGroupHeader.tabsBackground: #0C1522, terminal.background: #0F1B2B, terminal.foreground: #C6D4E0 }, tokenColors: [ { scope: [comment, comment.block, comment.line], settings: { foreground: #6A7D94, fontStyle: italic } }, { scope: [keyword.control, keyword.operator, storage.type], settings: { foreground: #58A6FF } }, { scope: [string, string.quoted.single, string.quoted.double], settings: { foreground: #9BD8B5 } }, { scope: [constant.numeric, constant.language], settings: { foreground: #D2A8FF } }, { scope: [entity.name.function, meta.function-call], settings: { foreground: #83C5FF } }, { scope: [entity.name.type, entity.name.class], settings: { foreground: #7DD3C0 } }, { scope: [variable, variable.other], settings: { foreground: #C6D4E0 } }, { scope: [invalid, invalid.illegal], settings: { foreground: #FF7B72 } } ] }注意tokenColors是数组每项由scope和settings组成和 settings.json 里的textMateRules结构一一对应。fontStyle可以取italic、bold、underline也可以组合但建议只在注释上用斜体其他位置用了斜体会让代码整体显得不安定这属于雅蓝「雅」字的一部分。另外我最后加了一条invalid的规则给报错和非法字符留了一个暖红色的出口全冷色系里没有这个警示色你根本看不出哪里编译不过。4.3 本地调试F5 拉起扩展开发宿主有了这两个文件还得配一个调试入口才能看见效果。.vscode/launch.json长这样{ version: 0.2.0, configurations: [ { name: Run Yalan Theme, type: extensionHost, request: launch, args: [--extensionDevelopmentPath${workspaceFolder}], outFiles: [] } ] }然后在 VSCode 里按 F5会弹出一个新的「Extension Development Host」窗口。这个窗口和你平时用的窗口完全隔离里面已经加载了你写的主题。按 CtrlShiftP 切主题能看到列表里多了一个「Yalan Blue」。之后你每改一次yalan-color-theme.json在那个窗口里执行 Developer: Reload Window 就能看到新效果不用重新 F5。这个流程跑通之后如果想分发给团队其他机器不用发布到市场那么重。用vsce package打一个.vsix包拷到对方机器上扩展面板右上角「Install from VSIX...」选择文件即可。这个方式很适合给不联网的内网环境、或者想先把插件原封不动拷过来试用的场景比让每个人都上市场下载更可控。5. 雅蓝主题踩坑记录高亮串色、括号配对与远程 SSH 的 5 个坑5.1 注释颜色改了但代码里的注释还是主题自带的绿色现象你在 settings.json 里把comments配成了#6A7D94但实际代码里的注释依旧是别的颜色。原因你的主题文件里注释的 scope 匹配比你写得更长、更具体。比如某主题里块注释的 scope 写的是comment.block.documentation你用comment覆盖时TextMate 在最长的 scope 上优先匹配主题里那条更长的规则赢了。解决用命令面板打开 Developer: Inspect Editor Tokens and Scopes把光标放在一段注释上面板里会列出当前 token 完整的 scope 链。把链里最长的那个 scope 原样抄进你的覆盖规则里颜色才会生效。这个查看器是整个主题调试里最值得练熟的工具没有之一。5.2 括号配对颜色还是五颜六色跟雅蓝不搭现象编辑器里括号匹配高亮是红黄绿紫一团整体风格被破坏。原因VSCode 从某个版本开始内置了括号配对高亮默认配色是六种不同色相早期很多人装的 Bracket Pair Colorizer 2 插件已经停止维护它和内置功能打架时会各显神通。括号颜色由colors里的 6 个键控制很多主题配置时忽略了它们。解决在workbench.colorCustomizations里加上下面 6 个键把这组颜色收敛到蓝紫闭环里editorBracketHighlight.foreground1: #58A6FF, editorBracketHighlight.foreground2: #79C0FF, editorBracketHighlight.foreground3: #D2A8FF, editorBracketHighlight.foreground4: #FFA657, editorBracketHighlight.foreground5: #7DD3C0, editorBracketHighlight.foreground6: #FF7B72前三个是蓝色系、第四个保留暖橙是防止多层嵌套时色相彻底分不清、最后两个是辅助色。配色主题这件事上最忌讳为了「统一」把所有颜色都锁成蓝——配对括号一旦同色层级就消失了。5.3 远程 SSH 窗口打开后雅蓝配色的状态栏和侧栏全回到默认色现象你本地配置完美但通过 Remote-SSH 连上服务器打开工作区界面配色变成了默认的深色。你以为主题也要装到远程服务器上结果在远程扩展面板装了一遍还是不对。原因主题属于 UI 扩展渲染走的是本地客户端不需要安装到远程。真正的问题通常是你的settings.json被同步到了远程但里面指向的主题名在远程那套扩展环境里不存在或者是你在远程侧装了主题本地侧没装两边配置错位。解决确认主题扩展装在本地侧本地-已安装远程侧不用装。打开命令面板搜 Preferences: Open Remote Settings看看远程窗口继承的配置里workbench.colorTheme是不是写了一个没装的主题名。把主题名改成你本地安装的「Yalan Blue」即可。远程开发场景下统一的 UI 颜色比统一的语法颜色更重要因为 SSH 窗口的终端里 ANSI 色不一定能复现你本地的精确色值这个先接受别花时间死磕远端子集颜色。5.4 Windows 7 老机器上启动报 .NET Framework 缺失界面回退默认配色现象在 Windows 7 64 位机器上安装新版 VSCode 后启动弹窗提示this application require one of following versions of the .net framework勉强能开但主题错乱雅蓝配色完全套不上。原因新版 VSCode 的界面组件依赖 .NET Framework 4.6 及以上老系统缺这个运行时界面渲染会降级或失败主题资源无法正常加载。解决按提示安装对应版本的 .NET Framework再重启 VSCode。如果机器实在装不上就只能用旧版 VSCode但旧版的主题机制和新版有差异雅蓝这类依赖语义高亮的配置在老版本里会打折扣。这条不是配色本身的问题却是换主题路上最容易劝退的一环先记下。5.5 高对比度模式下雅蓝失效颜色被系统强制覆盖现象用户开启了 Windows 的高对比度模式VSCode 自动切换到High Contrast黑色主题你辛辛苦苦配的雅蓝 UI 色全部失效。原因VSCode 对高对比度主题有一套独立的加载机制普通workbench.colorCustomizations里的覆盖在系统高对比度开启时不生效这是刻意的可访问性设计不是 bug。解决如果团队里有需要高对比度的成员不要试图用workbench.colorCustomizations硬刚。合适做法是单独写一个基于hc-black的雅蓝高对比度变体把uiTheme设成hc-black用更亮的描边和更高的对比度重新分配色阶。至少保证信息可读再谈好不好看。6. 用 Inspect Editor Tokens 校准雅蓝并让远程 SSH 窗口一起统一主题做完剩下的是校准。我强烈建议你花十分钟练熟 Developer: Inspect Editor Tokens and Scopes 这个工具把光标分别放到注释、字符串、关键字、函数名、数字上逐个查看它们当前的 scope 链和实际渲染色。凡是觉得「不够雅」的 token把 scope 复制下来进主题文件里补一条规则。做得多了你会发现真正需要自己配的语法角色不超过十个其余默认就好。比如我配完雅蓝之后Python 的装饰器经常串色因为它的 scope 是meta.decorator默认主题里常被归进函数或关键字我在 tokenColors 里补了{ scope: [meta.decorator, punctuation.definition.decorator], settings: { foreground: #7DD3C0 } }这个问题立刻消失。C/C 环境里宏定义、函数指针这类也同理用 Inspect 一个个看过去比猜 scope 快得多。远程 SSH 的窗口统一问题在配置好主题扩展的前提下做法是主题扩展装在本地远程窗口自动继承。你能在本地看到的雅蓝 UI 层颜色远程窗口基本一致语法层如果发现个别语言在远程服务器上不套色检查远程侧是否装了对应的语言扩展因为语言服务器是跑在远程端的语义高亮 token 可能由远程端下发给 UI。此外像 codex、deepseek 这类 AI 插件在对话面板里的气泡背景、文字颜色同样走的是 workbench 的colors体系你精心调的雅蓝会顺手把它们也统一掉不用单独给 AI 插件调色这是意外收获。我现在的习惯是把雅蓝的色阶固化成一张自制的色板表格贴在笔记里改主题时只动表里的值再全局替换进主题文件。不做成模板的话过两个月你就会忘了当初为什么字符串要用这个青绿而不是那个青绿。希望这篇能帮你把 VSCode 的雅蓝配色稳稳落地少走几趟弯路。本文还有配套的精品资源点击获取