Skip to content
zidane
UI kit reference

theme/themes

import { … } from 'zidane-ui'ui/src/theme/themes.ts

Functions#

resolveThemeFunction#

Finds a theme by id.

TypeScript
function resolveTheme(id: string | undefined, extraThemes?: readonly Theme[]): Theme

Parameters

Parameters
NameTypeDefaultDescription
idstring | undefined

The theme id. May be undefined.

extraThemes?readonly Theme[][]

Extension themes, checked before the built-in ones.

Returns

Theme

The matching theme, or DEFAULT_THEME when the id is missing or unknown.

ui/src/theme/themes.ts:754

Constants#

BUILTIN_THEMESConstant#

The built-in themes by id. Insertion order is the picker cycle order: default first, then light, then the dark and light families.

TypeScript
const BUILTIN_THEMES: Readonly<Record<string, Theme>>

ui/src/theme/themes.ts:734

DEFAULT_THEMEConstant#

The default dark theme, used when an id is unknown.

TypeScript
const DEFAULT_THEME: Theme

ui/src/theme/themes.ts:172

Interfaces#

SyntaxTokenStyleInterface#

Style of one syntax token: colours and font emphasis.

TypeScript
interface SyntaxTokenStyle

Properties

SyntaxTokenStyle properties
NameTypeDescription
bg?string

Background colour.

bold?boolean

Draw the token in bold.

fg?string

Text colour.

italic?boolean

Draw the token in italic.

underline?boolean

Draw the token underlined.

ui/src/theme/themes.ts:92

ThemeInterface#

A colour theme: its identity, palette, selection colours, surfaces and syntax styles. It parallels the terminal UI's themes but keeps only what the GUI reads.

TypeScript
interface Theme

Properties

Theme properties
NameTypeDescription
colorsThemeColors

The theme's palette.

idstring

Unique id, such as default or light. It is what resolveTheme looks up.

labelstring

Name shown in the theme picker.

selectThemeSelect

Colours of selectable option lists.

surfacesThemeSurfaces

Surface, selection, chip and diff colours.

syntaxSyntaxStyles

Syntax token styles.

ui/src/theme/themes.ts:115

ThemeColorsInterface#

GUI theme registry. Spiritually parallel to the canonical TUI themes in zidane/src/chat/themes/* but decoupled — the renderer only consumes a narrow subset (palette, surfaces and syntax.default.fg), so we keep the shape local and avoid lockstepping with canonical theme-type churn (which carries TUI-only fields the GUI never reads).

GUI-only color slots that aren't in the TUI palette:

  • throbber: [from, to] — Throbber gradient endpoints; defaults to brand and a muted accent when omitted.
  • money: string — footer cost-pill tint; defaults to --zg-text-muted when omitted.
TypeScript
interface ThemeColors

Properties

ThemeColors properties
NameTypeDescription
accentstring

Secondary hue, usually a success green. It becomes the palette's accentAlt.

borderstring

Default border colour.

borderActivestring

Border colour of the focused or active element. It becomes the palette's focus ring.

brandstring

Brand and interactive colour. It becomes the palette's accent.

dimstring

Secondary text colour. It becomes the palette's textMuted.

errorstring

Error status colour. It becomes the palette's danger.

modelstring

Tint that identifies the model.

money?string

Tint of the footer cost figure. Defaults to the muted text colour.

mutestring

Tertiary text colour. It becomes the palette's textSubtle.

throbber?readonly [string, string]

The two colours of the busy indicator. Defaults to brand and accent.

warnstring

Warning status colour.

ui/src/theme/themes.ts:16

ThemeDiffInterface#

Colours of a diff in a theme.

TypeScript
interface ThemeDiff

Properties

ThemeDiff properties
NameTypeDescription
addBgstring

Background of an added line.

addContentBg?string

Stronger background behind the changed text inside an added line. Derived when omitted.

addFgstring

Text colour of an added line.

removeBgstring

Background of a removed line.

removeContentBg?string

Stronger background behind the changed text inside a removed line. Derived when omitted.

removeFgstring

Text colour of a removed line.

ui/src/theme/themes.ts:60

ThemeSelectInterface#

Colours of a list of selectable options, in the shape the terminal themes use.

TypeScript
interface ThemeSelect

Properties

ThemeSelect properties
NameTypeDescription
backgroundColorstring

Background of an option.

descriptionColorstring

Colour of an option's description.

focusedBackgroundColorstring

Background of the focused option.

selectedBackgroundColorstring

Background of the selected option.

selectedDescriptionColorstring

Colour of the selected option's description.

selectedTextColorstring

Text colour of the selected option.

textColorstring

Text colour of an option.

ui/src/theme/themes.ts:42

ThemeSurfacesInterface#

Surface colours of a theme: the window canvas, reference chips, selection and diffs.

TypeScript
interface ThemeSurfaces

Properties

ThemeSurfaces properties
NameTypeDescription
chips{ default: { bg: string; fg: string }; files: { bg: string; fg: string }; skills: { bg: string; fg: string } }

Background and text colour of each kind of reference chip.

diffThemeDiff

Diff colours.

modalstring

Background of the window and modal layers. It becomes the palette's canvas.

selectionstring

Text selection background.

ui/src/theme/themes.ts:76

Types#

SyntaxStylesType#

Styles of syntax tokens by token name. The default entry's fg is the palette's body text colour.

TypeScript
type SyntaxStyles = Partial<Record<string, SyntaxTokenStyle>>

ui/src/theme/themes.ts:109