1# Themes
 2
 3The `themes` directory in an extension should contain one or more theme files.
 4
 5Each 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).
 6
 7See [this blog post](https://zed.dev/blog/user-themes-now-in-preview) for more details about creating themes.
 8
 9## Theme JSON Structure
10
11The structure of a Zed theme is defined in the [Zed Theme JSON Schema](https://zed.dev/schema/themes/v0.2.0.json).
12
13A Zed theme consists of a Theme Family object including:
14
15- `name`: The name for the theme family
16- `author`: The name of the author of the theme family
17- `themes`: An array of Themes belonging to the theme family
18
19The core components a Theme object include:
20
211. Theme Metadata:
22
23   - `name`: The name of the theme
24   - `appearance`: Either "light" or "dark"
25
262. Style Properties under the `style`, such as:
27
28   - `background`: The main background color
29   - `foreground`: The main text color
30   - `accent`: The accent color used for highlighting and emphasis
31
323. Syntax Highlighting:
33
34   - `syntax`: An object containing color definitions for various syntax elements (e.g., keywords, strings, comments)
35
364. UI Elements:
37
38   - Colors for various UI components such as:
39     - `element.background`: Background color for UI elements
40     - `border`: Border colors for different states (normal, focused, selected)
41     - `text`: Text colors for different states (normal, muted, accent)
42
435. Editor-specific Colors:
44
45   - Colors for editor-related elements such as:
46     - `editor.background`: Editor background color
47     - `editor.gutter`: Gutter colors
48     - `editor.line_number`: Line number colors
49
506. Terminal Colors:
51   - ANSI color definitions for the integrated terminal
52
53We 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.