Zed’s Theme Builder Gets a Practical Overhaul

Zed has rolled out a visual Theme Builder that moves theme customization from a handful of JSON keys to an interactive panel. The feature targets developers who spend more time tweaking colors than writing code, and it promises a faster path from design mock‑up to a usable editor theme.

---

The problem Zed is trying to solve

Most code editors expose theme settings as a flat list of color tokens—background, surface.background, border.focused, and so on. While this works for power users, newcomers often find the hierarchy opaque. A single typo or a missing reference can break the entire UI, leaving the editor in an unreadable state.

Zed’s previous workflow required developers to edit a JSON file, reload the window, and repeat until the UI looked right. The process was noisy, and the lack of immediate feedback made it hard to iterate on subtle shades like the Panel Indent Guide Hover or the Minimap Scrollbar.

What the new Theme Builder does

1. Live visual editor – The builder displays a live preview of the editor on the right side of the screen. Changing a token such as panel.indent_guide_active instantly updates the preview, eliminating the reload loop.
2. Grouped token view – Tokens are grouped by UI region (Surface, Panel, Border, etc.). This mirrors the way Zed’s UI is composed and helps users locate the right token without scrolling through a massive list.
3. Palette picker with accessibility hints – Selecting a color opens a picker that shows contrast ratios against the current background. Zed warns if a choice falls below WCAG AA for normal text, helping teams stay compliant.
4. Import / Export shortcuts – Themes can be imported from a URL or exported as a single JSON file. The UI also offers a “Reset to One Dark” button for quick baselines.
5. Versioned snapshots – Each time a theme is saved, Zed creates a snapshot that can be restored from a dropdown. This gives a safety net for experimental tweaks.

The builder’s UI is intentionally minimal: a left pane with token groups, a central color picker, and a right pane showing the editor. The design avoids flashy animations; the focus is on clarity.

How it fits into Zed’s ecosystem

Zed positions itself as a developer‑first editor that blends the flexibility of VS Code extensions with a tighter integration of language services. The Theme Builder aligns with that positioning by reducing the friction of visual customization, a common pain point for teams that want a branded look across their development environment.

By making theme creation more approachable, Zed hopes to attract design‑oriented teams that previously gravitated toward IDEs with richer UI theming tools. The feature also complements Zed’s existing extension marketplace, where community‑built themes can now be submitted directly from the builder.

Early traction and community response

Within the first week of the public preview, Zed reported:

• 120+ theme submissions to the marketplace, up from 30 in the previous month.
• 30% reduction in the average time developers spend on theme iteration, according to a voluntary survey of 200 users.
• Positive feedback on the accessibility overlay, with several teams citing it as a reason they could finally adopt a dark theme without compromising readability.

The community has already begun sharing custom palettes on GitHub, for example a “Solarized‑Zed” theme that mirrors the classic Solarized palette while respecting Zed’s component hierarchy. The repo includes the exported JSON and a short guide on how to import it via the builder.

What’s next?

Zed’s roadmap mentions two follow‑up items:

1. Token aliasing – Allow users to define a custom token (e.g., brandPrimary) that maps to multiple underlying tokens, simplifying brand‑wide updates.
2. Collaborative editing – A lightweight mode where multiple developers can tweak a shared theme in real time, useful for design‑dev sync sessions.

Both ideas build on the core premise of the Theme Builder: make visual iteration feel as natural as code iteration.

---

Quick start for developers

If you want to try the Theme Builder today, open Zed and press Ctrl+Shift+P, then select “Theme Builder: Open”. The panel will appear on the left side of the window. From there you can:

1. Pick a token group (e.g., Panel).
2. Click a token (e.g., panel.indent_guide_hover).
3. Choose a new color from the picker.
4. Observe the change instantly in the preview.
5. Click Export to download the JSON file, or Import to load an existing theme.

For more details, see the official documentation on the Zed Theme Builder page and the GitHub repository where the source code lives.

---

Zed’s Theme Builder isn’t a flashy redesign; it’s a practical tool that trims the friction out of a mundane but essential task. By giving developers a clear, live view of how their color choices affect the editor, Zed nudges the ecosystem toward more consistent, accessible, and maintainable UI themes.