Skip to main content
Coding Theme

Color themes

Zed preview

macOS Zed window using this variant's theme style.

colors

UI color keys from this variant's theme style.

keyHEXRGBRGBA
background
border
border.disabled
border.focused
border.selected
border.transparent
border.variant
editor.active_line_background
editor.active_line_number
editor.background
editor.find_match_background
editor.find_match_highlight_background
editor.foreground
editor.gutter.background
editor.highlighted_line_background
editor.inactive_selection_background
editor.indent_guide
editor.indent_guide_active
editor.line_number
editor.selection_background
element.active
element.background
element.disabled
element.hover
element.selected
elevated_surface.background
hint
hint.background
icon
icon.accent
icon.disabled
icon.muted
icon.placeholder
panel.background
panel.focused_border
panel.indent_guide
panel.indent_guide_active
panel.indent_guide_hover
status_bar.background
surface.background
tab_bar.background
tab.active_background
tab.inactive_background
terminal.ansi.black
terminal.ansi.blue
terminal.ansi.bright_black
terminal.ansi.bright_blue
terminal.ansi.bright_cyan
terminal.ansi.bright_green
terminal.ansi.bright_magenta
terminal.ansi.bright_red
terminal.ansi.bright_white
terminal.ansi.bright_yellow
terminal.ansi.cyan
terminal.ansi.green
terminal.ansi.magenta
terminal.ansi.red
terminal.ansi.white
terminal.ansi.yellow
terminal.background
terminal.foreground
text
text.accent
text.disabled
text.muted
text.placeholder
title_bar.background
toolbar.background

syntax

Syntax capture colors from the theme style. Italic and bold are not listed — the preview above shows them in the code.

captureHEXRGBRGBA
boolean
comment
constant
constant.builtin
function
function.builtin
function.method
keyword
keyword.control
keyword.modifier
keyword.operator
number
property
punctuation
punctuation.bracket
punctuation.delimiter
string
string.escape
string.regexp
tag
tag.attribute
type
type.builtin
variable
variable.builtin
variable.parameter

settings.json

Search for "Sonokai" in the Zed extensions store, then paste the settings below.

{
  "theme": {
    "mode": "dark",
    "light": "Sonokai",
    "dark": "Sonokai"
  }
}

Theme file