Theme tokens

A theme is a list of tokens: names such as accent or text_muted with a color (or a size) each. Components never hard-code colors; they ask the theme for a token. That is why one change to the theme restyles everything.

You use tokens in two ways:

pz.text("Total").style(color="text_muted")                 # by name, anywhere a color goes
pz.container(body, bg=self.resolved_theme().surface)          # as an attribute of the theme

Colors are #rrggbb or #rrggbbaa (the last two digits are the opacity). Token names work in style(), in a component’s color=/tint= parameters, in pz.Paint and in the designer’s color fields.

Surfaces

The large areas of the window, from the back to the front.

Token	What it colors	One Dark	One Light
`background`	The window behind everything, and app chrome such as the title and status bars of generated themes.	`#3b414d`	`#dcdcdd`
`surface`	Cards (`ui.card`), stats and other raised areas.	`#2f343e`	`#ebebec`
`elevated`	Floating things: menus, popovers, dropdowns, tooltips, dialogs, toasts and the command palette.	`#2f343e`	`#ebebec`
`editor`	Where people type: text fields, the code editor, the terminal background in generated themes.	`#282c33`	`#fafafa`
`panel`	Side panels and docks of a workspace, the help panel.	`#2f343e`	`#ebebec`
`title_bar`	The custom title bar (`ui.title_bar`, `ui.window_frame`).	`#3b414d`	`#dcdcdd`
`status_bar`	The status bar at the bottom of a workspace.	`#3b414d`	`#dcdcdd`
`tab_bar`	The strip behind the tabs of a tab bar.	`#2f343e`	`#ebebec`
`tab_active`	The selected tab.	`#282c33`	`#fafafa`
`tab_inactive`	The other tabs.	`#2f343e`	`#ebebec`
`terminal`	The terminal widget background.	`#282c33`	`#fafafa`

Borders

Token	What it colors	One Dark	One Light
`border`	Main borders: inputs, outline buttons, dividers, frames.	`#464b57`	`#c9c9ca`
`border_variant`	Softer borders: cards, filled buttons, list separators.	`#363c46`	`#dfdfe0`
`border_focused`	The ring around the focused input or list.	`#47679e`	`#7d82e8`
`border_selected`	The border of selected items (a translucent accent).	`#293b5b`	`#cbcdf6`

Elements and ghost elements

Elements are filled controls (the default ui.button, chips, segmented controls). Ghost elements have no background until you point at them: list rows, ghost and icon buttons, menu items, tree rows.

Token	What it colors	One Dark	One Light
`element`	Filled controls at rest.	`#2e343e`	`#ebebec`
`element_hover`	Filled controls under the pointer.	`#363c46`	`#dfdfe0`
`element_active`	Filled controls while pressed.	`#454a56`	`#cacaca`
`element_selected`	A selected filled control (a segmented option, a chosen icon).	`#454a56`	`#cacaca`
`ghost_hover`	A row or ghost button under the pointer.	`#363c46`	`#dfdfe0`
`ghost_active`	A row or ghost button while pressed.	`#454a56`	`#cacaca`
`ghost_selected`	The selected row of a list, tree, menu or tab.	`#454a56`	`#cacaca`

Text, icons and accent

Token	What it colors	One Dark	One Light
`text`	Body text and labels.	`#dce0e5`	`#242529`
`text_muted`	Secondary text: descriptions, captions, inactive tabs.	`#a9afbc`	`#58585a`
`text_placeholder`	Placeholder text in empty inputs.	`#878a98`	`#7e8086`
`text_disabled`	Disabled controls.	`#878a98`	`#7e8086`
`text_accent`	Links and highlighted text.	`#74ade8`	`#5c78e2`
`icon`	Icons next to text.	`#dce0e5`	`#242529`
`icon_muted`	Secondary icons: ghost icon buttons, list icons.	`#a9afbc`	`#58585a`
`accent`	The brand color: primary (`solid`) buttons, switches, sliders, progress bars, checkboxes.	`#74ade8`	`#5c78e2`
`on_accent`	Text and icons drawn on top of the accent (inside a solid button or a solid badge).	`#1c2025`	`#fafafa`

Status

Used by tint= (ui.badge, ui.callout, ui.button, ui.progress…), by toasts, validation messages and charts.

Token	What it colors	One Dark	One Light
`error`	Errors, destructive buttons, invalid fields.	`#d07277`	`#d36151`
`warning`	Warnings.	`#dec184`	`#a48819`
`success`	Success messages, positive changes in `ui.stat`.	`#a1c181`	`#669f59`
`info`	Information callouts (the accent by default).	`#74ade8`	`#5c78e2`
`hint`	Hints, the quietest callout.	`#788ca6`	`#7274a7`

Version control

For file trees, tabs and diffs (ui.tree, ui.diff_stat, the code editor’s gutter).

Token	What it colors	One Dark	One Light
`created`	Added files and lines.	`#a1c181`	`#669f59`
`modified`	Changed files and lines.	`#dec184`	`#a48819`
`deleted`	Removed files and lines.	`#d07277`	`#d36151`
`conflict`	Files with conflicts.	`#dec184`	`#a48819`
`ignored`	Ignored files.	`#878a98`	`#7e8086`

Code editor

For pz.code_editor, ui.terminal and code blocks.

Token	What it colors	One Dark	One Light
`editor_text`	Code text without highlighting.	`#acb2be`	`#242529`
`line_number`	Line numbers.	`#4e5a5f`	`#a2a3a7`
`line_number_active`	The number of the line with the cursor.	`#d0d4da`	`#242529`
`active_line`	The background of the line with the cursor.	`#2f343ebf`	`#ebebecbf`
`selection`	Selected text (also in inputs).	`#74ade83d`	`#5c78e23d`
`scrollbar`	Scrollbars.	`#c8ccd44c`	`#2425294c`
`scrollbar_hover`	A scrollbar under the pointer.	`#c8ccd480`	`#24252980`
`search_match`	Search results in the editor.	`#74ade866`	`#5c78e266`
`shadow`	Shadows of menus, popovers and dialogs.	`#0000004d`	`#00000026`

Syntax, terminal and people

These three are collections instead of single colors.

syntax: a dictionary from a highlighting name to a color, or to (color, "italic") / (color, "bold"). The main names are primary, comment, comment.doc, keyword, function, type, string, string.escape, number, boolean, constant, property, attribute, operator, variable, variable.special, punctuation, punctuation.bracket, tag, title and link_uri. A missing dotted name falls back to its first part (string.escape → string).
ansi: the terminal’s colors: black, red, green, yellow, blue, magenta, cyan, white, bright_black and dim.
players: a tuple of colors for avatars and collaborators; ui.avatar(index=n) and ui.facepile take the n-th one.

Token	What it colors	One Dark	One Light
`syntax.keyword`	`def`, `if`, `return`...	`#b477cf`	`#a449ab`
`syntax.function`	Function names.	`#73ade9`	`#5b79e3`
`syntax.string`	Strings.	`#a1c181`	`#649f57`
`syntax.comment`	Comments.	`#5d636f`	`#a2a3a7`
`syntax.type`	Classes and types.	`#6eb4bf`	`#3882b7`
`syntax.number`	Numbers.	`#bf956a`	`#ad6e25`
`ansi.red`	Red text in the terminal (and so on for each ANSI color).	`#d07277`	`#d36151`
`players.0`	The first avatar color (the accent by default).	`#74ade8`	`#5c78e2`

Sizes and metadata

Token	Default	What it sets
`radius`	`6.0`	Corner radius of cards, dialogs and large surfaces (cards use `radius + 2`).
`radius_sm`	`4.0`	Corner radius of buttons, inputs, chips and list rows.
`ui_font_size`	`14.0`	The base size of interface text; a form’s Font size and the global style’s `size` set it.
`buffer_font_size`	`14.0`	Text size in the code editor.
`name`		The name used by `pz.themes.get` and `theme = "..."`.
`appearance`		`"dark"` or `"light"`; `theme.is_dark` reads it.

From Python

t = pz.themes.get("One Dark")
t.accent                 # '#74ade8'
t.color("text_muted")    # the same as t.text_muted; hex colors pass through unchanged
t.tokens()               # every token as a dictionary
t.to_dict()              # JSON-friendly, the format Theme.save writes

The names follow the theme format of the Zed editor, so themes made for it can be imported (see Creating themes). The Theme API lists every method.