Zed IDE官宣：Theme Builder：告别 JSON 编辑，可视化打造完美主题还记得主题定制很简单的时候吗？

还记得主题定制很简单的时候吗？

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

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

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

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

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

为什么主题定制其实很难

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

Zed 的主题系统包括：

类别	数量	说明
UI 颜色类别	16 类	涵盖表面、边框、滚动条、终端等
语法颜色类别	10 类	满足所有高亮需求
玩家颜色	多色	每个参与者的光标、背景和选择色
语义关系	无数	需要保持一致性的颜色关系

颜色之间的相互依赖

这些颜色并非孤立存在：

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 调整
✅ 不再需要保存-切换-检查循环
✅ 只需选择颜色，看着你的主题瞬间活起来

在这里插入图片描述

界面概览

界面分为两部分：

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

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

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

在这里插入图片描述

核心功能详解

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

这里开始变得很酷了。

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

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

在这里插入图片描述

检查器会 ：

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

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

🔗 颜色链接（Color Linking）

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

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

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

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

🎨 语法高亮引擎

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

📥 导入/导出功能

导入现有主题 ：

已经有喜欢的主题？直接导入 Theme Builder 作为起点
自动解析 JSON
设置所有颜色和链接
立即开始定制

导出成果：

轻松导出为主题覆盖文件
或生成扩展文件，当你创建了真正独特的主题时

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

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

快速开始指南

总结

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

✅ 可视化编辑：告别 JSON 猜测
✅ 实时预览：所见即所得
✅ 智能链接：保持视觉一致性
✅ 元素检查器：精确控制每个元素
✅ Tree-sitter 高亮：与真实编辑器完全一致
✅ 导入/导出：无缝迁移现有主题

无论你是：

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

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

Zed IDE官宣：Theme Builder：告别 JSON 编辑，可视化打造完美主题

还记得主题定制很简单的时候吗？

为什么主题定制其实很难

Zed 的主题系统包括 ：

颜色之间的相互依赖

发现难题

Theme Builder

界面概览

核心功能详解

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

🔗 颜色链接（Color Linking）

🎨 语法高亮引擎

📥 导入/导出功能

快速开始指南

总结

Zed 的主题系统包括：