Theming

Themes are data, not global terminal mutations. A normalized theme contains color and spacing tokens, component defaults, variants, slots, and capability requirements.

const ocean = createTheme({
  id: "ocean",
  colors: {
    foreground: "#eafcff",
    background: "#071014",
    primary: "#16e0e6",
  },
});

Resolution

Documentation flow diagram. component props leads to theme variant; Variant leads to component defaults; Defaults leads to slot props; Slots leads to color and terminal capabilities; Capabilities leads to resolved Ink props — **Documentation flow diagram.** component props leads to theme variant; Variant leads to component defaults; Defaults leads to slot props; Slots leads to color and terminal capabilities; Capabilities leads to resolved Ink props

ThemeController is the live state owner. React consumers subscribe with useSyncExternalStore, so theme updates are tear-free and observable outside React. Static ThemeProvider usage remains available for isolated rendering and tests.

Use Theme customization for an end-to-end example.

Resolution

On this page