无私的爱都排着队挤上开往幸福的火车
下车的人都自愿的踏上回到现实的土壤
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 文件,里面有这些属性:
四个不同的背景色,对应四个不同的上下文。哪一个影响你正在看的那个元素?你的猜测和我一样靠谱。
- 修改 text,突然各种元素都变了
- 但 icon 却是分开的,尽管图标通常就在文字旁边
- 有些属性很直观,有些需要反复试验
主题系统功能强大且细致,但这种细致意味着你 constantly 在问:
"等等,哪个属性控制这个东西?"
一定有更好的方法!
Theme Builder
Theme Builder 是一个用于创建 Zed 主题的可视化编辑器 。
- ✅ 不再需要 JSON 调整
- ✅ 不再需要保存-切换-检查循环
- ✅ 只需选择颜色,看着你的主题瞬间活起来
![]()
界面概览
界面分为两部分:
- 左侧:实时预览区
- 显示 Zed UI 的交互式副本
- 右侧:颜色令牌控制面板
- 按类别组织的所有主题令牌
你做的每一个改变都会立即反映在预览中 :
- 选择新的背景色,立即看到效果
- 调整语法高亮,实时观察代码变换
![]()
![]()
核心功能 检查器(Inspector):右键点击一切
这里开始变得很酷了。
你有没有看过界面上的某个元素,心想"这个颜色是由哪个令牌控制的?"
与其在 200+ 个选项中大海捞针,不如直接在预览区右键点击任何元素!
![]()
检查器会 :
- 高亮显示该元素
- 精确展示控制其外观的所有主题令牌
- 点击令牌,直接跳转到对应的颜色输入框
这就像浏览器 DevTools,但是为你的主题而生!
颜色链接
这是另一个常见场景:你希望面板背景、标签背景和表面背景都使用相同的基色。
在原始 JSON 中,每次改变想法都要更新三个不同的值。
Theme Builder 引入了颜色链接功能 :
panel.background ──linked──> surface.backgroundtab.background ──linked──> surface.background语法高亮引擎预览中的代码不仅仅是彩色文字,它是真正使用 Tree-sitter 进行语法高亮的!
现成主题
内置主题 :我们包含了几个内置主题作为起点:
- One
- (经典)
- Ayu
- (美学倾向)
- Gruvbox
- (复古氛围)
总结
Zed 的 Theme Builder 代表了代码编辑器主题定制的新方向
无论你是:
- 想要完全定制的个人开发者
- 需要品牌一致性的团队
- 关注无障碍设计的专业人士
- 还是只是想微调现有主题
Theme Builder 都能让这个过程更加愉快和高效。
特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.