vndangkhoa/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2026-06-01 03:14:56 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

docs: Add content about the theme builder (#49229)

Browse source 
Release Notes:

- N/A
This commit is contained in:
Danilo Leal 2026-02-15 11:52:26 -03:00 committed by GitHub
parent 9dd3f3a6c5
commit 28c82ecad6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
docs/src/extensions/themes.md
View file

@ -50,4 +50,9 @@ The core components a Theme object include:
6. Terminal Colors:
- ANSI color definitions for the integrated terminal
We recommend looking at our [existing themes](https://github.com/zed-industries/zed/tree/main/assets/themes) to get a more comprehensive idea of what can be styled.
## Designing Your Theme
You can use [Zed's Theme Builder](https://zed.dev/theme-builder) to design your own custom theme based on an existing one.
This tool lets you fine-tune and preview how every surface in the Zed app will look.
You can then export the JSON for more easily publishing it in Zed's extension store.

21
docs/src/themes.md
View file

@ -9,16 +9,23 @@ Zed comes with a number of built-in themes, with more themes available as extens
## Selecting a Theme
See what themes are installed and preview them via the Theme Selector, which you can open from the command palette with `theme selector: toggle` (bound to {#kb theme_selector::Toggle}).
See what themes are installed and preview them via the Theme Selector, which you can open from the command palette with the `theme selector: toggle` (bound to {#kb theme_selector::Toggle}) action.
Navigating through the theme list by moving up and down will change the theme in real time and hitting enter will save it to your settings file.
Navigating through the theme list by moving up and down will change the theme in real time and hitting enter will save the selected one to your settings file.
## Installing more Themes
## Installing New Themes
More themes are available from the Extensions page, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions?filter=themes).
You can find hundreds of different theme options in Zed's extensions store, which you can access via the command palette with `zed: extensions` or the [Zed website](https://zed.dev/extensions?filter=themes).
Many popular themes have been ported to Zed, and if you're struggling to choose one, visit [zed-themes.com](https://zed-themes.com), a third-party gallery with visible previews for many of them.
## Build Your Theme
You can use [Zed's Theme Builder](https://zed.dev/theme-builder) to design your own custom theme based on an existing one.
This tool lets you fine-tune and preview how every surface in the Zed app will look.
You can then export the JSON for [local use](/themes.md#local-themes) or for [publishing in Zed's extension store](/extensions/themes.md).
## Configuring a Theme
Your selected theme is stored in your settings file.
@ -75,13 +82,9 @@ To see a comprehensive list of list of captures (like `comment` and `comment.doc
To see a list of available theme attributes look at the JSON file for your theme.
For example, [assets/themes/one/one.json](https://github.com/zed-industries/zed/blob/main/assets/themes/one/one.json) for the default One Dark and One Light themes.
## Local Themes
## Local Themes {#local-themes}
Store new themes locally by placing them in the `~/.config/zed/themes` directory (macOS and Linux) or `%USERPROFILE%\AppData\Roaming\Zed\themes\` (Windows).
For example, to create a new theme called `my-cool-theme`, create a file called `my-cool-theme.json` in that directory.
It will be available in the theme selector the next time Zed loads.
## Theme Development
See: [Developing Zed Themes](./extensions/themes.md)