1Sponsor

Theming

PreviousNext

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.

Terminal

ThemeProvider

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

pnpm dlx shadcn@latest add https://termcn.dev/r/theme-provider.json

Usage

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

import { createTheme } from "@/components/ui/theme-provider";
 
export const oceanTheme = createTheme({
  name: "ocean",
  colors: {
    primary: "#0ea5e9",
    accent: "#22d3ee",
    background: "#0f172a",
    foreground: "#e2e8f0",
  },
});

Themes