1---
 2title: Themes
 3description: "Themes for Zed extensions."
 4---
 5
 6# Themes
 7
 8The `themes` directory in an extension should contain one or more theme files.
 9
10Each theme file should adhere to the JSON schema specified at [`https://zed.dev/schema/themes/v0.2.0.json`](https://zed.dev/schema/themes/v0.2.0.json).
11
12See [this blog post](https://zed.dev/blog/user-themes-now-in-preview) for additional background on creating themes.
13
14## Theme JSON Structure
15
16The structure of a Zed theme is defined in the [Zed Theme JSON Schema](https://zed.dev/schema/themes/v0.2.0.json).
17
18A Zed theme consists of a Theme Family object including:
19
20- `name`: The name for the theme family
21- `author`: The name of the author of the theme family
22- `themes`: An array of Themes belonging to the theme family
23
24The core components of a Theme object include:
25
261. Theme Metadata:
27
28   - `name`: The name of the theme
29   - `appearance`: Either "light" or "dark"
30
312. Style Properties under the `style`, such as:
32
33   - `background`: The main background color
34   - `foreground`: The main text color
35   - `accent`: The accent color used for highlighting and emphasis
36
373. Syntax Highlighting:
38
39   - `syntax`: An object containing color definitions for various syntax elements (e.g., keywords, strings, comments)
40
414. UI Elements:
42
43   - Colors for various UI components such as:
44     - `element.background`: Background color for UI elements
45     - `border`: Border colors for different states (normal, focused, selected)
46     - `text`: Text colors for different states (normal, muted, accent)
47
485. Editor-specific Colors:
49
50   - Colors for editor-related elements such as:
51     - `editor.background`: Editor background color
52     - `editor.gutter`: Gutter colors
53     - `editor.line_number`: Line number colors
54
556. Terminal Colors:
56   - ANSI color definitions for the integrated terminal
57
58## Designing Your Theme
59
60You can use [Zed's Theme Builder](https://zed.dev/theme-builder) to design your own custom theme based on an existing one.
61
62This tool lets you fine-tune and preview how surfaces in Zed will look.
63You can then export the JSON and publish it in Zed's extension store.