1---
  2title: Themes - Zed
  3description: Browse, install, and create themes for Zed. Includes built-in themes and community theme extensions.
  4---
  5
  6# Themes
  7
  8Zed comes with a number of built-in themes, with more themes available as extensions.
  9
 10## Selecting a Theme
 11
 12See 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.
 13
 14Navigating 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.
 15
 16## Installing New Themes
 17
 18You 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).
 19
 20Many 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.
 21
 22## Build Your Theme
 23
 24You can use [Zed's Theme Builder](https://zed.dev/theme-builder) to design your own custom theme based on an existing one.
 25
 26This tool lets you fine-tune and preview how every surface in the Zed app will look.
 27You can then export the JSON for [local use](./themes.md#local-themes) or for [publishing in Zed's extension store](./extensions/themes.md).
 28
 29## Configuring a Theme
 30
 31Your selected theme is stored in your settings file.
 32You can open your settings file from the command palette with {#action zed::OpenSettingsFile} (bound to {#kb zed::OpenSettingsFile}).
 33
 34By default, Zed maintains two themes: one for light mode and one for dark mode.
 35You can set the mode to `"dark"` or `"light"` to ignore the current system mode.
 36
 37```json [settings]
 38{
 39  "theme": {
 40    "mode": "system",
 41    "light": "One Light",
 42    "dark": "One Dark"
 43  }
 44}
 45```
 46
 47### Toggle Theme Mode from the Keyboard
 48
 49Use {#kb theme::ToggleMode} to switch the current theme mode between light and dark.
 50
 51If your settings currently use a static theme value, like:
 52
 53```json [settings]
 54{
 55  "theme": "Any Theme"
 56}
 57```
 58
 59the first toggle converts it to dynamic theme selection with default themes:
 60
 61```json [settings]
 62{
 63  "theme": {
 64    "mode": "system",
 65    "light": "One Light",
 66    "dark": "One Dark"
 67  }
 68}
 69```
 70
 71You are required to set both `light` and `dark` themes manually after the first toggle.
 72
 73After that, toggling updates only `theme.mode`.
 74If `light` and `dark` are the same theme, the first toggle may not produce a visible UI change until you set different values for `light` and `dark`.
 75
 76## Theme Overrides
 77
 78To override specific attributes of a theme, use the `theme_overrides` setting.
 79This setting can be used to configure theme-specific overrides.
 80
 81For example, add the following to your `settings.json` if you wish to override the background color of the editor and display comments and doc comments as italics:
 82
 83```json [settings]
 84{
 85  "theme_overrides": {
 86    "One Dark": {
 87      "editor.background": "#333",
 88      "syntax": {
 89        "comment": {
 90          "font_style": "italic"
 91        },
 92        "comment.doc": {
 93          "font_style": "italic"
 94        }
 95      },
 96      "accents": [
 97        "#ff0000",
 98        "#ff7f00",
 99        "#ffff00",
100        "#00ff00",
101        "#0000ff",
102        "#8b00ff"
103      ]
104    }
105  }
106}
107```
108
109To see a comprehensive list of list of captures (like `comment` and `comment.doc`) see [Language Extensions: Syntax highlighting](./extensions/languages.md#syntax-highlighting).
110
111To see a list of available theme attributes look at the JSON file for your theme.
112For 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.
113
114## Local Themes {#local-themes}
115
116Store new themes locally by placing them in the `~/.config/zed/themes` directory (macOS and Linux) or `%USERPROFILE%\AppData\Roaming\Zed\themes\` (Windows).
117
118For example, to create a new theme called `my-cool-theme`, create a file called `my-cool-theme.json` in that directory.
119It will be available in the theme selector the next time Zed loads.