# Theming

Terminal themes, ThemeProvider, and custom palettes for Ink apps.

**Theming** in termcn means wrapping your Ink tree with **`ThemeProvider`** and choosing a **terminal theme** (tokens for colors, borders, and spacing). Theme packages install into `lib/terminal-themes/` and pull in the **`theme-provider`** registry item when needed.

## Preview

Use the terminal chrome theme picker to preview palettes in the browser docs shell.

## ThemeProvider

Install the provider (required for registry UI components that call `useTheme`):

```bash
npx shadcn@latest add @termcn/theme-provider
```

### Usage

```tsx
import { ThemeProvider } from "@/components/ui/theme-provider";
import { defaultTheme } from "@/lib/terminal-themes/default";
import { Spinner } from "@/registry/ui/spinner";

export function Example() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Spinner label="Generating registry items" />
    </ThemeProvider>
  );
}
```

### Custom themes

```tsx
import { createTheme } from "@/components/ui/theme-provider";

export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});
```

## Available Themes

- [Default](https://www.termcn.dev/docs/themes/default.md)
- [Catppuccin](https://www.termcn.dev/docs/themes/catppuccin.md)
- [Dracula](https://www.termcn.dev/docs/themes/dracula.md)
- [High Contrast](https://www.termcn.dev/docs/themes/high-contrast.md)
- [High Contrast Light](https://www.termcn.dev/docs/themes/high-contrast-light.md)
- [Monokai](https://www.termcn.dev/docs/themes/monokai.md)
- [Nord](https://www.termcn.dev/docs/themes/nord.md)
- [One Dark](https://www.termcn.dev/docs/themes/one-dark.md)
- [Solarized](https://www.termcn.dev/docs/themes/solarized.md)
- [Tokyo Night](https://www.termcn.dev/docs/themes/tokyo-night.md)
- [AMOLED](https://www.termcn.dev/docs/themes/amoled.md)
- [Aura](https://www.termcn.dev/docs/themes/aura.md)
- [Ayu](https://www.termcn.dev/docs/themes/ayu.md)
- [Carbonfox](https://www.termcn.dev/docs/themes/carbonfox.md)
- [Catppuccin Frappe](https://www.termcn.dev/docs/themes/catppuccin-frappe.md)
- [Catppuccin Macchiato](https://www.termcn.dev/docs/themes/catppuccin-macchiato.md)
- [Cobalt2](https://www.termcn.dev/docs/themes/cobalt2.md)
- [Cursor](https://www.termcn.dev/docs/themes/cursor.md)
- [Everforest](https://www.termcn.dev/docs/themes/everforest.md)
- [Flexoki](https://www.termcn.dev/docs/themes/flexoki.md)
- [GitHub](https://www.termcn.dev/docs/themes/github.md)
- [Gruvbox](https://www.termcn.dev/docs/themes/gruvbox.md)
- [Kanagawa](https://www.termcn.dev/docs/themes/kanagawa.md)
- [Lucent Orng](https://www.termcn.dev/docs/themes/lucent-orng.md)
- [Material](https://www.termcn.dev/docs/themes/material.md)
- [Matrix](https://www.termcn.dev/docs/themes/matrix.md)
- [Mercury](https://www.termcn.dev/docs/themes/mercury.md)
- [Night Owl](https://www.termcn.dev/docs/themes/nightowl.md)
- [OC-2](https://www.termcn.dev/docs/themes/oc-2.md)
- [One Dark Pro](https://www.termcn.dev/docs/themes/onedarkpro.md)
- [OpenCode](https://www.termcn.dev/docs/themes/opencode.md)
- [Orng](https://www.termcn.dev/docs/themes/orng.md)
- [Osaka Jade](https://www.termcn.dev/docs/themes/osaka-jade.md)
- [Palenight](https://www.termcn.dev/docs/themes/palenight.md)
- [Rose Pine](https://www.termcn.dev/docs/themes/rosepine.md)
- [Shades of Purple](https://www.termcn.dev/docs/themes/shadesofpurple.md)
- [Synthwave '84](https://www.termcn.dev/docs/themes/synthwave84.md)
- [Vercel](https://www.termcn.dev/docs/themes/vercel.md)
- [Vesper](https://www.termcn.dev/docs/themes/vesper.md)
- [Zenburn](https://www.termcn.dev/docs/themes/zenburn.md)