# Theming

Source: /tuil/docs/concepts/theming
Locale: en

Tokens, variants, slots, registries, capabilities, and live theme state.



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

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

## Resolution [#resolution]

<Mermaid
  chart="flowchart LR
  Props[&#x22;component props&#x22;] --> Variant[&#x22;theme variant&#x22;]
  Variant --> Defaults[&#x22;component defaults&#x22;]
  Defaults --> Slots[&#x22;slot props&#x22;]
  Slots --> Capabilities[&#x22;color and terminal capabilities&#x22;]
  Capabilities --> Ink[&#x22;resolved Ink props&#x22;]"
/>

`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](/tuil/docs/guides/theme-customization) for an end-to-end
example.