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 文件，里面有这些属性：

1{

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

3"panel.background":"#252526",

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

5"toolbar.background":"#333333"

6}

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

修改text，突然各种元素都变了

但icon却是分开的，尽管图标通常就在文字旁边

有些属性很直观，有些需要反复试验

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

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

一定有更好的方法！

Theme Builder

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

不再需要 JSON 调整

不再需要保存-切换-检查循环

只需选择颜色，看着你的主题瞬间活起来

界面概览

界面分为两部分：

左侧：实时预览区

显示 Zed UI 的交互式副本

右侧：颜色令牌控制面板

按类别组织的所有主题令牌

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

选择新的背景色，立即看到效果

调整语法高亮，实时观察代码变换

核心功能

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

这里开始变得很酷了。

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

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

检查器会 ：

高亮显示该元素

精确展示控制其外观的所有主题令牌

点击令牌，直接跳转到对应的颜色输入框

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

颜色链接

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

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

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

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

tab.background ──linked──> surface.background 语法高亮引擎

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

现成主题

内置主题 ：

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

One

（经典）

Ayu

（美学倾向）

Gruvbox

（复古氛围）

总结

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

无论你是：

想要完全定制的个人开发者

需要品牌一致性的团队

关注无障碍设计的专业人士

还是只是想微调现有主题

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