From 8d003626590fe4798147b2be29003f13d1a7e667 Mon Sep 17 00:00:00 2001 From: Godruoyi Date: Wed, 28 Jan 2026 23:25:25 +0800 Subject: [PATCH 1/5] feat: add theme builder tip --- tips/theme-builder-customize.mdx | 49 ++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 tips/theme-builder-customize.mdx diff --git a/tips/theme-builder-customize.mdx b/tips/theme-builder-customize.mdx new file mode 100644 index 0000000..80f1caf --- /dev/null +++ b/tips/theme-builder-customize.mdx @@ -0,0 +1,49 @@ +--- +title: Build Custom Themes with Theme Builder +subtitle: Create and customize your perfect Zed theme visually +category: config +difficulty: beginner +tags: + - themes + - customization + - ui +mediaType: image +mediaUrl: 'https://zed.dev/img/theme-builder.png' +--- + +Zed's official **Theme Builder** lets you create and customize themes visually without writing any code. Whether you want to tweak an existing theme or build one from scratch, the Theme Builder makes it easy. + +## Getting Started + +1. Visit [zed.dev/theme-builder](https://zed.dev/theme-builder) +2. Choose a base theme to start from, or begin with a blank canvas +3. Customize colors using the visual editor +4. Preview your changes in real-time + +## Key Features + +**Visual Color Picker**: Click on any UI element to customize its color. No need to remember JSON structure or color codes. + +**Real-time Preview**: See your changes instantly in a live Zed editor preview, showing how your theme looks with actual code. + +**Export & Share**: When you're done, export your theme as a JSON file or share it with the community. + +## How to Use Your Custom Theme + +After creating your theme: + +1. Export the theme JSON from Theme Builder +2. Add it to your Zed themes directory: + - macOS: `~/.config/zed/themes/` + - Linux: `~/.config/zed/themes/` + - Windows: `%APPDATA%\Zed\themes\` +3. Select your theme from the theme picker (`theme selector: toggle` in command palette) + +## Pro Tips + +- Start with a theme you already like and make small adjustments +- Test your theme with different file types (Rust, JavaScript, Markdown, etc.) +- Pay attention to both light and dark variants if you switch between them +- Share your themes on the [Zed Extensions repository](https://github.com/zed-industries/extensions) + +No more editing JSON by hand—create beautiful themes the easy way! From f5c669442c97c00276938555ddbb67e4575e7179 Mon Sep 17 00:00:00 2001 From: Godruoyi Date: Wed, 28 Jan 2026 23:29:01 +0800 Subject: [PATCH 2/5] theme-builder --- tips/theme-builder-customize.mdx | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/tips/theme-builder-customize.mdx b/tips/theme-builder-customize.mdx index 80f1caf..8d64d79 100644 --- a/tips/theme-builder-customize.mdx +++ b/tips/theme-builder-customize.mdx @@ -8,7 +8,7 @@ tags: - customization - ui mediaType: image -mediaUrl: 'https://zed.dev/img/theme-builder.png' +mediaUrl: 'https://github.com/user-attachments/assets/1a1497d0-ae50-4358-b10a-ad8bc46a3d60' --- Zed's official **Theme Builder** lets you create and customize themes visually without writing any code. Whether you want to tweak an existing theme or build one from scratch, the Theme Builder makes it easy. @@ -27,23 +27,3 @@ Zed's official **Theme Builder** lets you create and customize themes visually w **Real-time Preview**: See your changes instantly in a live Zed editor preview, showing how your theme looks with actual code. **Export & Share**: When you're done, export your theme as a JSON file or share it with the community. - -## How to Use Your Custom Theme - -After creating your theme: - -1. Export the theme JSON from Theme Builder -2. Add it to your Zed themes directory: - - macOS: `~/.config/zed/themes/` - - Linux: `~/.config/zed/themes/` - - Windows: `%APPDATA%\Zed\themes\` -3. Select your theme from the theme picker (`theme selector: toggle` in command palette) - -## Pro Tips - -- Start with a theme you already like and make small adjustments -- Test your theme with different file types (Rust, JavaScript, Markdown, etc.) -- Pay attention to both light and dark variants if you switch between them -- Share your themes on the [Zed Extensions repository](https://github.com/zed-industries/extensions) - -No more editing JSON by hand—create beautiful themes the easy way! From 39e6bd6a537128a77c0d282b429f68504b5cfecf Mon Sep 17 00:00:00 2001 From: Lianbo Xu Date: Wed, 28 Jan 2026 23:39:16 +0800 Subject: [PATCH 3/5] Update theme-builder-customize.mdx --- tips/theme-builder-customize.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tips/theme-builder-customize.mdx b/tips/theme-builder-customize.mdx index 8d64d79..4d2a76b 100644 --- a/tips/theme-builder-customize.mdx +++ b/tips/theme-builder-customize.mdx @@ -8,7 +8,7 @@ tags: - customization - ui mediaType: image -mediaUrl: 'https://github.com/user-attachments/assets/1a1497d0-ae50-4358-b10a-ad8bc46a3d60' +mediaUrl: 'https://github.com/user-attachments/assets/396649ce-af15-4508-ac03-fd63b8fe4d60' --- Zed's official **Theme Builder** lets you create and customize themes visually without writing any code. Whether you want to tweak an existing theme or build one from scratch, the Theme Builder makes it easy. From b748f2cb27940ad965661d4e9c5c2561a4a85ff9 Mon Sep 17 00:00:00 2001 From: Lianbo Xu Date: Thu, 29 Jan 2026 13:31:52 +0800 Subject: [PATCH 4/5] Update theme-builder-customize.mdx --- tips/theme-builder-customize.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tips/theme-builder-customize.mdx b/tips/theme-builder-customize.mdx index 4d2a76b..940cb97 100644 --- a/tips/theme-builder-customize.mdx +++ b/tips/theme-builder-customize.mdx @@ -8,7 +8,7 @@ tags: - customization - ui mediaType: image -mediaUrl: 'https://github.com/user-attachments/assets/396649ce-af15-4508-ac03-fd63b8fe4d60' +mediaUrl: 'https://cat.zed.tips/2026-01-29/zed-theme-builder.png' --- Zed's official **Theme Builder** lets you create and customize themes visually without writing any code. Whether you want to tweak an existing theme or build one from scratch, the Theme Builder makes it easy. From a214305fe12f68ecaad5d8304f3cd312042bfbc6 Mon Sep 17 00:00:00 2001 From: Github action Date: Thu, 29 Jan 2026 05:32:07 +0000 Subject: [PATCH 5/5] chore: auto-add metadata fields [auto-metadata] --- tips/theme-builder-customize.mdx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/tips/theme-builder-customize.mdx b/tips/theme-builder-customize.mdx index 940cb97..dc28a07 100644 --- a/tips/theme-builder-customize.mdx +++ b/tips/theme-builder-customize.mdx @@ -9,6 +9,10 @@ tags: - ui mediaType: image mediaUrl: 'https://cat.zed.tips/2026-01-29/zed-theme-builder.png' +publishedAt: '2026-01-29' +updatedAt: '2026-01-29' +author: godruoyi +authorUrl: 'https://github.com/godruoyi' --- Zed's official **Theme Builder** lets you create and customize themes visually without writing any code. Whether you want to tweak an existing theme or build one from scratch, the Theme Builder makes it easy.