ThemePaletteProps

Defined in: react/components/overlay/theme-palette.tsx:15

Props for the ThemePalette picker.

Properties

defaultValue?

optional defaultValue?: string

Defined in: react/components/overlay/theme-palette.tsx:51

Initial theme by name, applied once on mount (uncontrolled; ignored when value is set).

---

maxVisible?

optional maxVisible?: number

Defined in: react/components/overlay/theme-palette.tsx:35

Maximum theme cards shown at once before the grid scrolls. Defaults to 12 (4 rows of 3); rounded down to a whole number of rows.

---

onSelect?

optional onSelect?: (theme) => void

Defined in: react/components/overlay/theme-palette.tsx:53

Called with the theme each time one is applied (Enter or click) — the hook for persisting it.

Parameters

theme

Theme

Returns

void

---

placeholder?

optional placeholder?: string

Defined in: react/components/overlay/theme-palette.tsx:37

Filter input placeholder.

---

title?

optional title?: string

Defined in: react/components/overlay/theme-palette.tsx:28

Heading shown in the title bar. Defaults to "Themes".

---

toggleKey?

optional toggleKey?: string

Defined in: react/components/overlay/theme-palette.tsx:26

Key that toggles the picker. Defaults to "ctrl+t" — a single cross-platform binding that reaches the app on every terminal (it’s a C0 control byte). It avoids the pitfalls of the alternatives: Ctrl+Alt+T collides with OS global shortcuts (open-terminal on Linux, app hotkeys on Windows), F9 isn’t delivered by some terminals (e.g. Windows Terminal), and Cmd+T is swallowed by macOS terminals for “new tab” before it ever reaches the program. The binding is also listed in the command palette (“Change theme”); pass another key (e.g. "ctrl+k") to rebind.

---

value?

optional value?: string

Defined in: react/components/overlay/theme-palette.tsx:49

Controlled active theme by name. When set, the picker keeps the app on this theme and re-applies it whenever the prop changes — pair it with onSelect to persist and restore the user’s choice (e.g. from localStorage or a config file):

const [theme, setTheme] = useState(() => load() ?? "default-dark");
<ThemePalette value={theme} onSelect={(t) => { setTheme(t.name); save(t.name); }} />

---

width?

optional width?: number

Defined in: react/components/overlay/theme-palette.tsx:30

Panel width in columns. Defaults to 78 (fits a 3-card row).