Zed IDE 又扔出了一个新玩具，确实比 VS Code 清新优雅！

无私的爱都排着队挤上开往幸福的火车

下车的人都自愿的踏上回到现实的土壤

Zed 前几天推出了可视化主题构建器，让你无需编辑 JSON 就能创建自定义主题。实时预览、一键检查器功能。

主题进化史

据我了解，过去的代码编辑器是单色的。就这样一种颜色，而且不是由设计师选择的，而是由你的显示器制造商决定的。

如今，像 Zed 这样的现代编辑器拥有 200+ 个颜色令牌 ：

• 背景色、边框色、略微不同的边框色
• 编译器错误提示色（当编译器对你的代码感到失望时）
• 每种语法令牌的颜色
• 多人协作时的玩家颜色（光标、背景、选中色）

主题是个性化的，主题是艺术。 但在 JSON 文件中编辑 200 个值来实现你的愿景？不太优雅。

Zed ide这次构建了 Theme Builder：一个可视化编辑器，让你可以实时预览、即时查看哪个令牌控制什么，并在完成后导出结果。无需 JSON 折腾

为什么主题定制其实很难

关于现代代码编辑器的主题定制，事实是：这不仅仅是挑选几个好看的颜色。

Zed 的主题系统包括 ：

颜色之间的相互依赖

这些颜色并非孤立存在：

editor.background ←→ editor.foreground  // 可读性
syntax.keyword ←→ syntax.type          // 视觉层次  
error.indicator ←→ gutter.background   // 可访问性

改变一个颜色，你突然就在整个界面中玩打地鼠游戏，修复各种可读性问题。

发现难题

也许更大的挑战是弄清楚哪个颜色控制什么。

你看着一个 JSON 文件，里面有这些属性：

{

"editor.background":"#1e1e1e",

"panel.background":"#252526",

"surface.background":"#2d2d30",

"toolbar.background":"#333333"

}

四个不同的背景色，对应四个不同的上下文。哪一个影响你正在看的那个元素？你的猜测和我一样靠谱。

• 修改 text，突然各种元素都变了
• 但 icon 却是分开的，尽管图标通常就在文字旁边
• 有些属性很直观，有些需要反复试验

主题系统功能强大且细致，但这种细致意味着你 constantly 在问：

"等等，哪个属性控制这个东西？"

一定有更好的方法！

Theme Builder

Theme Builder 是一个用于创建 Zed 主题的可视化编辑器 。

• ✅ 不再需要 JSON 调整
• ✅ 不再需要保存-切换-检查循环
• ✅ 只需选择颜色，看着你的主题瞬间活起来

在这里插入图片描述

界面概览

界面分为两部分：

1. 左侧：实时预览区 显示 Zed UI 的交互式副本
2. 右侧：颜色令牌控制面板 按类别组织的所有主题令牌

你做的每一个改变都会立即反映在预览中 ：

• 选择新的背景色，立即看到效果
• 调整语法高亮，实时观察代码变换

在这里插入图片描述

在这里插入图片描述

核心功能

🔍 检查器（Inspector）：右键点击一切

这里开始变得很酷了。

你有没有看过界面上的某个元素，心想"这个颜色是由哪个令牌控制的？"

与其在 200+ 个选项中大海捞针，不如直接在预览区右键点击任何元素！

在这里插入图片描述

检查器会 ：

1. 高亮显示该元素
2. 精确展示控制其外观的所有主题令牌
3. 点击令牌，直接跳转到对应的颜色输入框

这就像浏览器 DevTools，但是为你的主题而生！

🔗 颜色链接

这是另一个常见场景：你希望面板背景、标签背景和表面背景都使用相同的基色。

在原始 JSON 中，每次改变想法都要更新三个不同的值。

Theme Builder 引入了颜色链接功能 ：

panel.background ──linked──> surface.background
tab.background ──linked──> surface.background

🎨 语法高亮引擎

预览中的代码不仅仅是彩色文字，它是真正使用 Tree-sitter 进行语法高亮的！

📥 现成主题

内置主题 ： 我们包含了几个内置主题作为起点：

• One（经典）
• Ayu（美学倾向）
• Gruvbox（复古氛围）

总结

Zed 的 Theme Builder 代表了代码编辑器主题定制的新方向

无论你是：

• 想要完全定制的个人开发者
• 需要品牌一致性的团队
• 关注无障碍设计的专业人士
• 还是只是想微调现有主题

Theme Builder 都能让这个过程更加愉快和高效。