很多人以为搞个护眼主题就是换个深色皮肤实际上手才发现真正决定眼睛舒不舒服的是那些藏在细节里的对比度、饱和度、字体和图标配置。我前后折腾 vscode 和 trae 的主题设置差不多有大半年踩过不少坑最后整理出了一套从主题选型到图标配置、再到细节微调的完整做法。这篇就按我的实际顺序讲清楚每一步都是可复现的。先说结论护眼主题的核心不是暗色而是低刺激、适中的对比度和稳定的色温好看的图标则取决于文件图标主题和产品图标主题的搭配以及和你的主题色是否协调。1. 选主题之前先搞清楚护眼到底护的是什么很多人的误区是一上来就装一堆暗色主题装完发现眼睛更累了。这里有个基本的光学原理眼睛的疲劳感主要来自三方面——频闪PWM调光、蓝光刺激和过高的明暗对比度。在编辑器这个场景里我们能控制的是后两者。明暗对比度这块有个反直觉的点纯黑背景 纯白文字是最伤眼的组合之一。因为你的屏幕周围通常比屏幕暗当你盯着一个高对比区域看几个小时瞳孔会不断在适应暗环境和接收强光之间切换睫状肌始终处于紧张状态。所以真正适合长时间编码的背景是那种带一点灰度、看起来像旧纸张或者柔和的深灰蓝的颜色而不是#000000。蓝光这块就不用多说了。夜间用冷白主题等于让大脑以为还是白天褪黑素分泌被抑制直接影响睡眠质量。这也是为什么夜猫子程序员几乎都往暗色主题跑。我自己的判断标准很简单把主题背景和文字颜色的对比度控制在 7:1 到 10:1 之间WCAG 的 AAA 标准是 7:1既保证看得清又不至于刺眼。强烈不建议低于 4.5:1那纯属折磨自己。各位如果懒得算对比度就直接避开纯黑底 纯白字和纯白底 纯黑字这两个极端。结论先行护眼主题的优先级排序应该是——对比度适中 色温偏暖 饱和度受控 纯暗色。把这个顺序记在脑子里你选主题的时候就不会被花里胡哨的预览图带偏。2. 主流护眼主题逐个说哪个适合你我在 vscode 和 trae 上装过不下二十个主题真正留下来长期用的也就四五个。这里按护眼程度和颜值综合打分分享给大家。2.1 One Dark Pro最稳的入门选择这个主题几乎是 vscode 默认的事实标准很多人没装过别的主题时就觉得 vscode 自带的就是它。它的背景是#282c34一种偏灰的深蓝黑文字是柔和的浅灰白不刺眼。关键在于它的语义高亮颜色饱和度控制得很好关键字是偏紫的蓝字符串是偏橄榄的绿函数名是偏青的蓝整体看起来和谐没有哪一块颜色会突然跳出来刺你眼睛。代码量大的项目里它会比其他高饱和主题舒服很多。One Dark Pro 唯一的缺点是有些人觉得对比度偏低低分辨率屏幕上略糊但 2K 及以上屏幕完全没问题。2.2 Dracula Official颜值党的护眼之选Dracula 走的是高颜值但不刺眼路线背景是深紫灰#282a36比 One Dark 稍微亮一点点。它的特点是用粉红、青绿、紫色这些高明度低饱和的色彩做语法高亮整体有种霓虹但不俗气的质感。实际测试下来长时间看代码眼睛不累而且审美疲劳来得慢。缺点是如果你用分屏布局Dracula 的侧边栏配色稍微偏暖和某些文件图标主题搭配时会显得杂乱。这个后面在图标章节会细说。2.3 Solarized Dark为长时间阅读而生的偏科生Solarized 是学术圈很经典的低对比度主题它的设计目标就是减少视觉疲劳而不是好看。背景是带绿调的深灰#002b36文字和背景的对比度恰好卡在舒适区标注是最小可读对比度。实测下来它的问题是代码高亮的区分度偏低——关键字、字符串、函数名的颜色差异不够大扫读代码时定位速度会慢一些。所以我的建议是如果你主要工作是长文档阅读、写 MarkdownSolarized 很合适如果你每天要快速扫大量代码逻辑它可能让你着急。2.4 其他值得放进候选列表的GitHub Dark Default灰阶克制蓝白配色干净适合从 GitHub 网页端过来的用户和网页端阅读体验一致。Tokyo Night Storm比原版 Tokyo Night 降低了饱和度深蓝背景代码高亮清晰在暗色主题里属于冷色调护眼的代表。Monokai Pro付费但是滤镜系统设计得很好Ristretto 滤镜的护眼效果不错愿意花钱的话可以试试。到这里我要单独说一句护眼主题没有绝对最优只有最适合你显示环境的那一款。Chromebook 的屏幕和 MBP 的屏幕观感完全不同同一主题在不同屏幕上的实际效果差异很大。装完主题后至少用一周再决定要不要换朝三暮四看预览图做决定大概率会反复横跳浪费时间。3. 光换主题不够这些字体和界面细节才是护眼的关键很多教程讲到这里就结束了实际上主题选完只算完成一半。真正让眼睛舒服的是下面这些搭配细节每一项都直接影响长时间使用的体验。3.1 字体代码字体和中文回退字体必须一起配很多人只设置了英文字体结果注释和字符串里的中文全用系统默认字体渲染出来粗细不均、边缘发虚看久了眼睛酸。正确做法是同时指定英文字体和中文回退字体。我目前用的是这一段配置{ editor.fontFamily: JetBrains Mono, Sarasa Mono SC, Microsoft YaHei, monospace, editor.fontSize: 14, editor.lineHeight: 24, editor.fontLigatures: true, editor.letterSpacing: 0.5 }说明一下几个关键点JetBrains Mono字母的区分度高特别是0/O1/l/I这些容易混淆的字符字形设计专门优化过斜体也好看。Fira Code 也可以但 JetBrains Mono 在中文环境的回退表现更好。Sarasa Mono SC等距更纱黑体这是主打中文等宽的开源字体和代码字体混排时中文不会忽宽忽窄。如果没有它你用微软雅黑也不是不行但等宽对齐会差一些。lineHeight 设为 24很多人忽略行高。默认 1.5 倍对密集代码来说行距偏紧长期看容易串行。24px 是我们针对 14px 字号调过的最舒适区间视距 60-70cm 的情况下眼球移动量最小。fontLigatures连字功能把!渲染成漂亮的符号识别速度提升明显属于用上就回不去的那种功能。3.2 光标、选区、波浪线最容易刺眼的三处细节主题的背景和文字搞定后最影响注意力的是另外三个视觉元素——光标、选中区域和错误波浪线。默认光标是个细竖线长时间盯着闪烁的光标眼睛的注视点每次都要重新对焦。建议换成块状光标并降低闪烁率{ editor.cursorBlinking: phase, editor.cursorSmoothCaretAnimation: on, editor.cursorStyle: line, editor.cursorWidth: 2 }选中区域的颜色如果饱和度太高想想你在 300 行代码里框选一块区域的视觉刺激有多强。我通常会把选中区域的透明度调低具体做法是配合主题色微调workbench.colorCustomizations。这个后面单独展开。还有错误波形线squiggly underline我这里必须吐槽一句vscode 默认的红波浪线和绿波浪线饱和度极高在全神贯注写代码时突然瞟到满屏红心情瞬间就不好了。我一般会把错误提示从波浪线改成下划线或者把它的颜色降饱和{ editor.errorForeground: #d47a7a, editor.warningForeground: #b9a46d, editorError.border: #d47a7a, editorWarning.border: #b9a46d }3.3 workbench.colorCustomizations把主题微调成你的专属版本没有任何主题是 100% 适配你的屏幕和审美的所以workbench.colorCustomizations就是最后的微调手段。我以 Dracula 为例给出我长期在用的配置{ workbench.colorCustomizations: { editor.background: #22252e, editorLineNumber.foreground: #55606e, editorLineNumber.activeForeground: #c9d1d9, editor.selectionBackground: #3b4a5e99, editor.inactiveSelectionBackground: #3b4a5e55, editorCursor.foreground: #e6c07b, sideBar.background: #1e2128, sideBarSectionHeader.background: #2a2d36, activityBar.background: #16181e, statusBar.background: #16181e, statusBar.foreground: #9aa4b2 } }几个设置的解释editor.selectionBackground我用了带透明度的色值选中代码时背景不会完全盖住选中的文本页面整体视觉噪音小很多。activityBar.background弄成比侧边栏更深一档会让图标栏和侧边栏形成自然分层视觉上更聚焦。行号的暗色处理很重要代码区已经很多颜色了行号不需要高亮存在感。太亮的行号会把视线从代码行本身拽走。这套配置下去之后整个工作区少了很多抢注意力的元素时间长了你就知道这个价值有多大。4. 图标主题怎么选文件图标与产品图标分开理解主题搞定后下一步就是图标。这里我先帮大家理清一个概念避免后续踩坑。vscode 和 trae 里图标实际上分两类文件图标主题File Icon Theme控制资源管理器里.js.py.md这些文件显示成什么图标。产品图标主题Product Icon Theme控制左侧活动栏、编辑器标题栏、菜单栏里的功能性图标比如搜索、设置、运行按钮。很多人只装了文件图标主题没管产品图标主题结果左边工具栏还是老旧的样子整体风格不统一看着就难受。4.1 文件图标主题三选一vscode-icons最老牌文件类型覆盖极广基本上你想得到的文件格式都有专属图标能认出几百种框架和配置文件。缺点是真丑图标风格偏 2015 年扁平化初期棱角硬、颜色杂。Material Icon Theme颜值和实用性的最佳平衡图标是 Material 风格圆润、颜色克制还针对主流框架配了特殊图标Vue、React、Next.js 都有专属形态。我用的是这个强烈推荐。Symbols相对小众特点是窄文件图标类似数据流风格对长文件名的显示更友好文件夹展开收起状态区分明显。选型建议懒人直接选Material Icon Theme它和绝大多数护眼主题的暗色背景兼容性最好。如果你用的是 One Dark Pro配合 Material Icon Theme 基本就是网上那批高颜值 vscode 截图的标配。4.2 安装后的关键一步手动激活这里是我第一次用 trae 时栽过的坑。插件市场里安装完 Material Icon Theme 后如果界面没有任何变化别急着重装。你需要检查这两处第一种方式在命令面板执行CtrlShiftP Material Icon Theme: Activate第二种方式打开设置搜索fileIconTheme手动指定{ workbench.iconTheme: material-icon-theme, workbench.productIconTheme: material-icon-theme }productIconTheme这个属性在 vscode 的默认设置里经常不出现很多人不知道它的存在导致产品图标一直是旧样式。手动写进settings.json是最稳妥的办法。然后在 Trae 里有个需要注意的地方Trae 的 UI 和 vscode 官方版略有差异如果你在 Trae 里装完图标不生效优先检查它的活动栏有没有被内置插件覆盖。遇到这个情况把workbench.productIconTheme改成 default 再改回 material-icon-theme强制刷新一次就好。4.3 让图标和主题配色统一的小妙招Material Icon Theme 可以在设置里微调配色让它和你的主题色系更搭。在 settings.json 里加上{ material-icon-theme.folders.color: #7a8fa6, material-icon-theme.files.color: #8a9bb0, material-icon-theme.activeIconPack: react_redux }这里解释一下folders.color控制文件夹图标的颜色默认是偏黄的 Material 黄在冷色调护眼主题里有点突兀改成低饱和蓝灰色后整体和谐很多。activeIconPack是 Material Icon Theme 的特色功能你可以在里面选自己常用的框架图标风格react_redux、vue、nest、angular 等选中后相关文件会显示框架生态专属图标辨识度一下子上来了。5. Trae 用户的特殊问题设置同步和主题不生效现在单独说说 Trae。Trae 和 vscode 同源基本兼容 vscode 的插件生态但有几个平台差异值得注意。5.1 Trae 的设置文件在哪Trae 是基于 vscode 内核分叉的所以设置结构几乎一样但目录名不同。在 Trae 里上述所有配置的settings.json位于Windows%APPDATA%\Trae\User\settings.jsonmacOS~/Library/Application Support/Trae/User/settings.json如果你在 Trae 的CtrlShiftP里执行 Open User Settings (JSON)也会直接打开这个文件。建议所有配置都直接写在 JSON 里因为 Trae 的 UI 设置面板对某些 vscode 扩展属性的渲染不完全搜索不到某个配置项时反而是直接编辑 JSON 最可靠。5.2 配置同步让 trae 和 vscode 共用一份主题配置我主力编辑器是 vscode偶尔切到 Trae 写点 AI 辅助相关的代码。为了不让两边主题割裂我直接把settings.json里主题相关的片段通过配置同步功能打通。Trae 支持登录后进行设置同步你可以在设置里把 Settings Sync 开启然后把workbench.colorTheme、workbench.iconTheme这些核心键值放进云端同步范围。注意一点同步前先确认两边插件都装好否则会出现配置一样但图标/主题互相缺的混乱状态。我建议的顺序是——先在两边的插件市场分别装好主题与图标再开启同步最后统一微调。还有个小技巧Trae 的侧边栏对深色主题的渲染和 vscode 官方不完全一致具体表现为侧边栏某些区域会偏亮。如果遇到这种情况在我上面给的workbench.colorCustomizations基础上把sideBar.background和activityBar.background再调低一档亮度就行。我目前的 Trae 专用配置是{ workbench.colorCustomizations: { editor.background: #1e2027, sideBar.background: #181a20, activityBar.background: #14161b } }这样 Trae 的暗色层次比 vscode 略深两个软件并排使用时视觉上没有跳脱感。6. 从安装到微调的一键配置直接抄作业版很多人看到这里可能觉得散我直接给一份完整可复制的配置清单。这份配置我实测在 vscode1.88和 Trae当前最新版上都能正常生效主题用的是 One Dark Pro Material Icon Theme。6.1 需要安装的扩展主题One Dark Pro市场里全名是One Dark Pro字体JetBrains Mono、Sarasa Mono SC这两款需要到官网下载安装到系统不是插件图标Material Icon Theme市场里搜索Material Icon Theme注意别装成 vscode-icons名字相近但效果差很多6.2 完整 settings.json 配置{ workbench.colorTheme: One Dark Pro, workbench.iconTheme: material-icon-theme, workbench.productIconTheme: material-icon-theme, editor.fontFamily: JetBrains Mono, Sarasa Mono SC, Microsoft YaHei, monospace, editor.fontSize: 14, editor.lineHeight: 24, editor.fontLigatures: true, editor.letterSpacing: 0.5, editor.cursorBlinking: phase, editor.cursorSmoothCaretAnimation: on, editor.cursorWidth: 2, editor.minimap.renderCharacters: false, editor.occurrencesHighlight: false, editor.selectionHighlight: false, editor.bracketPairColorization.enabled: true, editor.guides.bracketPairsHorizontal: active, workbench.colorCustomizations: { editor.background: #262a33, editorLineNumber.foreground: #4e5865, editorLineNumber.activeForeground: #b8c0ca, editor.selectionBackground: #2f3d50aa, editor.inactiveSelectionBackground: #2f3d5055, editorCursor.foreground: #d7ba7d, sideBar.background: #20242c, activityBar.background: #171a1f, statusBar.background: #171a1f, statusBar.foreground: #9099a8, editorError.foreground: #cc7777, editorWarning.foreground: #b0966a }, material-icon-theme.folders.color: #7a8fa6, material-icon-theme.files.color: #8a9bb0, material-icon-theme.activeIconPack: react_redux }这份配置我用了小半年眼睛的酸涩感相比原来用的默认主题明显减少。有几个配置单独说明一下editor.minimap.renderCharacters设成false小地图的字符渲染改成色块模式对比度降低既能快速定位代码块又不会像以前那样满屏彩色噪点。editor.occurrencesHighlight和editor.selectionHighlight关掉一个是高亮所有选中词出现位置一个是高亮选中区域的相同文本。这两个功能在长文件里会把页面变成满屏淡蓝色块视觉噪音极大。关掉之后靠滚动条上的标记和查找面板定位就够了。bracketPairColorization.enabled开启括号配对颜色这个虽然会增加一点视觉信息但能显著降低在大括号嵌套中迷失的概率是实用性优先的选择。6.3 配置完之后一定要做的三件事配置完不是立刻生效需要做三步验证重启窗口CtrlShiftP→Developer: Reload Window确保主题、图标、字体全部重新加载。这一步能解决 80% 的怎么没变化问题。检查终端字体如果集成终端的字体没跟上写命令时斜体和特殊字符会发虚。在 settings.json 里追加一段{ terminal.integrated.fontFamily: JetBrains Mono, Sarasa Mono SC, monospace, terminal.integrated.fontSize: 13, terminal.integrated.lineHeight: 1.4 }确认字体渲染打开一个文件看代码里的l和1、0和O是否清晰可辨。如果发虚或者重影回到系统字体设置确认 JetBrains Mono 安装成功并在编辑器里重新选择一次字体。到这里整套护眼主题 高颜值图标的配置就完全落地了。这些东西看着零散但组合起来的效果是实际的我现在一整天高强度盯代码眼睛的干涩感比以前轻得多而且工作区界面看着顺眼心情也稳定这本身就是生产力的一部分。最后再分享一个我自己的小习惯如果某天你突然觉得界面哪哪都不对劲别急着换主题先用二分法排查——把workbench.colorCustomizations临时注释掉看是不是自定义覆盖和第三方主题冲突了。这种现象最常见于主题升级之后开发者改了配色变量名而你旧的覆盖配置还挂在里面导致某一块颜色诡异。删掉多余的覆盖、保留核心项大部分问题都能解决。 
长河君 · 2026/10/9 18:39:35 · 阅读 1.2k VSCode与Trae护眼主题配置指南：对比度、字体与图标细节微调
很多人以为搞个护眼主题就是换个深色皮肤实际上手才发现真正决定眼睛舒不舒服的是那些藏在细节里的对比度、饱和度、字体和图标配置。我前后折腾 vscode 和 trae 的主题设置差不多有大半年踩过不少坑最后整理出了一套从主题选型到图标配置、再到细节微调的完整做法。这篇就按我的实际顺序讲清楚每一步都是可复现的。先说结论护眼主题的核心不是暗色而是低刺激、适中的对比度和稳定的色温好看的图标则取决于文件图标主题和产品图标主题的搭配以及和你的主题色是否协调。1. 选主题之前先搞清楚护眼到底护的是什么很多人的误区是一上来就装一堆暗色主题装完发现眼睛更累了。这里有个基本的光学原理眼睛的疲劳感主要来自三方面——频闪PWM调光、蓝光刺激和过高的明暗对比度。在编辑器这个场景里我们能控制的是后两者。明暗对比度这块有个反直觉的点纯黑背景 纯白文字是最伤眼的组合之一。因为你的屏幕周围通常比屏幕暗当你盯着一个高对比区域看几个小时瞳孔会不断在适应暗环境和接收强光之间切换睫状肌始终处于紧张状态。所以真正适合长时间编码的背景是那种带一点灰度、看起来像旧纸张或者柔和的深灰蓝的颜色而不是#000000。蓝光这块就不用多说了。夜间用冷白主题等于让大脑以为还是白天褪黑素分泌被抑制直接影响睡眠质量。这也是为什么夜猫子程序员几乎都往暗色主题跑。我自己的判断标准很简单把主题背景和文字颜色的对比度控制在 7:1 到 10:1 之间WCAG 的 AAA 标准是 7:1既保证看得清又不至于刺眼。强烈不建议低于 4.5:1那纯属折磨自己。各位如果懒得算对比度就直接避开纯黑底 纯白字和纯白底 纯黑字这两个极端。结论先行护眼主题的优先级排序应该是——对比度适中 色温偏暖 饱和度受控 纯暗色。把这个顺序记在脑子里你选主题的时候就不会被花里胡哨的预览图带偏。2. 主流护眼主题逐个说哪个适合你我在 vscode 和 trae 上装过不下二十个主题真正留下来长期用的也就四五个。这里按护眼程度和颜值综合打分分享给大家。2.1 One Dark Pro最稳的入门选择这个主题几乎是 vscode 默认的事实标准很多人没装过别的主题时就觉得 vscode 自带的就是它。它的背景是#282c34一种偏灰的深蓝黑文字是柔和的浅灰白不刺眼。关键在于它的语义高亮颜色饱和度控制得很好关键字是偏紫的蓝字符串是偏橄榄的绿函数名是偏青的蓝整体看起来和谐没有哪一块颜色会突然跳出来刺你眼睛。代码量大的项目里它会比其他高饱和主题舒服很多。One Dark Pro 唯一的缺点是有些人觉得对比度偏低低分辨率屏幕上略糊但 2K 及以上屏幕完全没问题。2.2 Dracula Official颜值党的护眼之选Dracula 走的是高颜值但不刺眼路线背景是深紫灰#282a36比 One Dark 稍微亮一点点。它的特点是用粉红、青绿、紫色这些高明度低饱和的色彩做语法高亮整体有种霓虹但不俗气的质感。实际测试下来长时间看代码眼睛不累而且审美疲劳来得慢。缺点是如果你用分屏布局Dracula 的侧边栏配色稍微偏暖和某些文件图标主题搭配时会显得杂乱。这个后面在图标章节会细说。2.3 Solarized Dark为长时间阅读而生的偏科生Solarized 是学术圈很经典的低对比度主题它的设计目标就是减少视觉疲劳而不是好看。背景是带绿调的深灰#002b36文字和背景的对比度恰好卡在舒适区标注是最小可读对比度。实测下来它的问题是代码高亮的区分度偏低——关键字、字符串、函数名的颜色差异不够大扫读代码时定位速度会慢一些。所以我的建议是如果你主要工作是长文档阅读、写 MarkdownSolarized 很合适如果你每天要快速扫大量代码逻辑它可能让你着急。2.4 其他值得放进候选列表的GitHub Dark Default灰阶克制蓝白配色干净适合从 GitHub 网页端过来的用户和网页端阅读体验一致。Tokyo Night Storm比原版 Tokyo Night 降低了饱和度深蓝背景代码高亮清晰在暗色主题里属于冷色调护眼的代表。Monokai Pro付费但是滤镜系统设计得很好Ristretto 滤镜的护眼效果不错愿意花钱的话可以试试。到这里我要单独说一句护眼主题没有绝对最优只有最适合你显示环境的那一款。Chromebook 的屏幕和 MBP 的屏幕观感完全不同同一主题在不同屏幕上的实际效果差异很大。装完主题后至少用一周再决定要不要换朝三暮四看预览图做决定大概率会反复横跳浪费时间。3. 光换主题不够这些字体和界面细节才是护眼的关键很多教程讲到这里就结束了实际上主题选完只算完成一半。真正让眼睛舒服的是下面这些搭配细节每一项都直接影响长时间使用的体验。3.1 字体代码字体和中文回退字体必须一起配很多人只设置了英文字体结果注释和字符串里的中文全用系统默认字体渲染出来粗细不均、边缘发虚看久了眼睛酸。正确做法是同时指定英文字体和中文回退字体。我目前用的是这一段配置{ editor.fontFamily: JetBrains Mono, Sarasa Mono SC, Microsoft YaHei, monospace, editor.fontSize: 14, editor.lineHeight: 24, editor.fontLigatures: true, editor.letterSpacing: 0.5 }说明一下几个关键点JetBrains Mono字母的区分度高特别是0/O1/l/I这些容易混淆的字符字形设计专门优化过斜体也好看。Fira Code 也可以但 JetBrains Mono 在中文环境的回退表现更好。Sarasa Mono SC等距更纱黑体这是主打中文等宽的开源字体和代码字体混排时中文不会忽宽忽窄。如果没有它你用微软雅黑也不是不行但等宽对齐会差一些。lineHeight 设为 24很多人忽略行高。默认 1.5 倍对密集代码来说行距偏紧长期看容易串行。24px 是我们针对 14px 字号调过的最舒适区间视距 60-70cm 的情况下眼球移动量最小。fontLigatures连字功能把!渲染成漂亮的符号识别速度提升明显属于用上就回不去的那种功能。3.2 光标、选区、波浪线最容易刺眼的三处细节主题的背景和文字搞定后最影响注意力的是另外三个视觉元素——光标、选中区域和错误波浪线。默认光标是个细竖线长时间盯着闪烁的光标眼睛的注视点每次都要重新对焦。建议换成块状光标并降低闪烁率{ editor.cursorBlinking: phase, editor.cursorSmoothCaretAnimation: on, editor.cursorStyle: line, editor.cursorWidth: 2 }选中区域的颜色如果饱和度太高想想你在 300 行代码里框选一块区域的视觉刺激有多强。我通常会把选中区域的透明度调低具体做法是配合主题色微调workbench.colorCustomizations。这个后面单独展开。还有错误波形线squiggly underline我这里必须吐槽一句vscode 默认的红波浪线和绿波浪线饱和度极高在全神贯注写代码时突然瞟到满屏红心情瞬间就不好了。我一般会把错误提示从波浪线改成下划线或者把它的颜色降饱和{ editor.errorForeground: #d47a7a, editor.warningForeground: #b9a46d, editorError.border: #d47a7a, editorWarning.border: #b9a46d }3.3 workbench.colorCustomizations把主题微调成你的专属版本没有任何主题是 100% 适配你的屏幕和审美的所以workbench.colorCustomizations就是最后的微调手段。我以 Dracula 为例给出我长期在用的配置{ workbench.colorCustomizations: { editor.background: #22252e, editorLineNumber.foreground: #55606e, editorLineNumber.activeForeground: #c9d1d9, editor.selectionBackground: #3b4a5e99, editor.inactiveSelectionBackground: #3b4a5e55, editorCursor.foreground: #e6c07b, sideBar.background: #1e2128, sideBarSectionHeader.background: #2a2d36, activityBar.background: #16181e, statusBar.background: #16181e, statusBar.foreground: #9aa4b2 } }几个设置的解释editor.selectionBackground我用了带透明度的色值选中代码时背景不会完全盖住选中的文本页面整体视觉噪音小很多。activityBar.background弄成比侧边栏更深一档会让图标栏和侧边栏形成自然分层视觉上更聚焦。行号的暗色处理很重要代码区已经很多颜色了行号不需要高亮存在感。太亮的行号会把视线从代码行本身拽走。这套配置下去之后整个工作区少了很多抢注意力的元素时间长了你就知道这个价值有多大。4. 图标主题怎么选文件图标与产品图标分开理解主题搞定后下一步就是图标。这里我先帮大家理清一个概念避免后续踩坑。vscode 和 trae 里图标实际上分两类文件图标主题File Icon Theme控制资源管理器里.js.py.md这些文件显示成什么图标。产品图标主题Product Icon Theme控制左侧活动栏、编辑器标题栏、菜单栏里的功能性图标比如搜索、设置、运行按钮。很多人只装了文件图标主题没管产品图标主题结果左边工具栏还是老旧的样子整体风格不统一看着就难受。4.1 文件图标主题三选一vscode-icons最老牌文件类型覆盖极广基本上你想得到的文件格式都有专属图标能认出几百种框架和配置文件。缺点是真丑图标风格偏 2015 年扁平化初期棱角硬、颜色杂。Material Icon Theme颜值和实用性的最佳平衡图标是 Material 风格圆润、颜色克制还针对主流框架配了特殊图标Vue、React、Next.js 都有专属形态。我用的是这个强烈推荐。Symbols相对小众特点是窄文件图标类似数据流风格对长文件名的显示更友好文件夹展开收起状态区分明显。选型建议懒人直接选Material Icon Theme它和绝大多数护眼主题的暗色背景兼容性最好。如果你用的是 One Dark Pro配合 Material Icon Theme 基本就是网上那批高颜值 vscode 截图的标配。4.2 安装后的关键一步手动激活这里是我第一次用 trae 时栽过的坑。插件市场里安装完 Material Icon Theme 后如果界面没有任何变化别急着重装。你需要检查这两处第一种方式在命令面板执行CtrlShiftP Material Icon Theme: Activate第二种方式打开设置搜索fileIconTheme手动指定{ workbench.iconTheme: material-icon-theme, workbench.productIconTheme: material-icon-theme }productIconTheme这个属性在 vscode 的默认设置里经常不出现很多人不知道它的存在导致产品图标一直是旧样式。手动写进settings.json是最稳妥的办法。然后在 Trae 里有个需要注意的地方Trae 的 UI 和 vscode 官方版略有差异如果你在 Trae 里装完图标不生效优先检查它的活动栏有没有被内置插件覆盖。遇到这个情况把workbench.productIconTheme改成 default 再改回 material-icon-theme强制刷新一次就好。4.3 让图标和主题配色统一的小妙招Material Icon Theme 可以在设置里微调配色让它和你的主题色系更搭。在 settings.json 里加上{ material-icon-theme.folders.color: #7a8fa6, material-icon-theme.files.color: #8a9bb0, material-icon-theme.activeIconPack: react_redux }这里解释一下folders.color控制文件夹图标的颜色默认是偏黄的 Material 黄在冷色调护眼主题里有点突兀改成低饱和蓝灰色后整体和谐很多。activeIconPack是 Material Icon Theme 的特色功能你可以在里面选自己常用的框架图标风格react_redux、vue、nest、angular 等选中后相关文件会显示框架生态专属图标辨识度一下子上来了。5. Trae 用户的特殊问题设置同步和主题不生效现在单独说说 Trae。Trae 和 vscode 同源基本兼容 vscode 的插件生态但有几个平台差异值得注意。5.1 Trae 的设置文件在哪Trae 是基于 vscode 内核分叉的所以设置结构几乎一样但目录名不同。在 Trae 里上述所有配置的settings.json位于Windows%APPDATA%\Trae\User\settings.jsonmacOS~/Library/Application Support/Trae/User/settings.json如果你在 Trae 的CtrlShiftP里执行 Open User Settings (JSON)也会直接打开这个文件。建议所有配置都直接写在 JSON 里因为 Trae 的 UI 设置面板对某些 vscode 扩展属性的渲染不完全搜索不到某个配置项时反而是直接编辑 JSON 最可靠。5.2 配置同步让 trae 和 vscode 共用一份主题配置我主力编辑器是 vscode偶尔切到 Trae 写点 AI 辅助相关的代码。为了不让两边主题割裂我直接把settings.json里主题相关的片段通过配置同步功能打通。Trae 支持登录后进行设置同步你可以在设置里把 Settings Sync 开启然后把workbench.colorTheme、workbench.iconTheme这些核心键值放进云端同步范围。注意一点同步前先确认两边插件都装好否则会出现配置一样但图标/主题互相缺的混乱状态。我建议的顺序是——先在两边的插件市场分别装好主题与图标再开启同步最后统一微调。还有个小技巧Trae 的侧边栏对深色主题的渲染和 vscode 官方不完全一致具体表现为侧边栏某些区域会偏亮。如果遇到这种情况在我上面给的workbench.colorCustomizations基础上把sideBar.background和activityBar.background再调低一档亮度就行。我目前的 Trae 专用配置是{ workbench.colorCustomizations: { editor.background: #1e2027, sideBar.background: #181a20, activityBar.background: #14161b } }这样 Trae 的暗色层次比 vscode 略深两个软件并排使用时视觉上没有跳脱感。6. 从安装到微调的一键配置直接抄作业版很多人看到这里可能觉得散我直接给一份完整可复制的配置清单。这份配置我实测在 vscode1.88和 Trae当前最新版上都能正常生效主题用的是 One Dark Pro Material Icon Theme。6.1 需要安装的扩展主题One Dark Pro市场里全名是One Dark Pro字体JetBrains Mono、Sarasa Mono SC这两款需要到官网下载安装到系统不是插件图标Material Icon Theme市场里搜索Material Icon Theme注意别装成 vscode-icons名字相近但效果差很多6.2 完整 settings.json 配置{ workbench.colorTheme: One Dark Pro, workbench.iconTheme: material-icon-theme, workbench.productIconTheme: material-icon-theme, editor.fontFamily: JetBrains Mono, Sarasa Mono SC, Microsoft YaHei, monospace, editor.fontSize: 14, editor.lineHeight: 24, editor.fontLigatures: true, editor.letterSpacing: 0.5, editor.cursorBlinking: phase, editor.cursorSmoothCaretAnimation: on, editor.cursorWidth: 2, editor.minimap.renderCharacters: false, editor.occurrencesHighlight: false, editor.selectionHighlight: false, editor.bracketPairColorization.enabled: true, editor.guides.bracketPairsHorizontal: active, workbench.colorCustomizations: { editor.background: #262a33, editorLineNumber.foreground: #4e5865, editorLineNumber.activeForeground: #b8c0ca, editor.selectionBackground: #2f3d50aa, editor.inactiveSelectionBackground: #2f3d5055, editorCursor.foreground: #d7ba7d, sideBar.background: #20242c, activityBar.background: #171a1f, statusBar.background: #171a1f, statusBar.foreground: #9099a8, editorError.foreground: #cc7777, editorWarning.foreground: #b0966a }, material-icon-theme.folders.color: #7a8fa6, material-icon-theme.files.color: #8a9bb0, material-icon-theme.activeIconPack: react_redux }这份配置我用了小半年眼睛的酸涩感相比原来用的默认主题明显减少。有几个配置单独说明一下editor.minimap.renderCharacters设成false小地图的字符渲染改成色块模式对比度降低既能快速定位代码块又不会像以前那样满屏彩色噪点。editor.occurrencesHighlight和editor.selectionHighlight关掉一个是高亮所有选中词出现位置一个是高亮选中区域的相同文本。这两个功能在长文件里会把页面变成满屏淡蓝色块视觉噪音极大。关掉之后靠滚动条上的标记和查找面板定位就够了。bracketPairColorization.enabled开启括号配对颜色这个虽然会增加一点视觉信息但能显著降低在大括号嵌套中迷失的概率是实用性优先的选择。6.3 配置完之后一定要做的三件事配置完不是立刻生效需要做三步验证重启窗口CtrlShiftP→Developer: Reload Window确保主题、图标、字体全部重新加载。这一步能解决 80% 的怎么没变化问题。检查终端字体如果集成终端的字体没跟上写命令时斜体和特殊字符会发虚。在 settings.json 里追加一段{ terminal.integrated.fontFamily: JetBrains Mono, Sarasa Mono SC, monospace, terminal.integrated.fontSize: 13, terminal.integrated.lineHeight: 1.4 }确认字体渲染打开一个文件看代码里的l和1、0和O是否清晰可辨。如果发虚或者重影回到系统字体设置确认 JetBrains Mono 安装成功并在编辑器里重新选择一次字体。到这里整套护眼主题 高颜值图标的配置就完全落地了。这些东西看着零散但组合起来的效果是实际的我现在一整天高强度盯代码眼睛的干涩感比以前轻得多而且工作区界面看着顺眼心情也稳定这本身就是生产力的一部分。最后再分享一个我自己的小习惯如果某天你突然觉得界面哪哪都不对劲别急着换主题先用二分法排查——把workbench.colorCustomizations临时注释掉看是不是自定义覆盖和第三方主题冲突了。这种现象最常见于主题升级之后开发者改了配色变量名而你旧的覆盖配置还挂在里面导致某一块颜色诡异。删掉多余的覆盖、保留核心项大部分问题都能解决。