guides

Theming

The color tokens the components read, and how to change them.

install the theme

One command writes the tokens below into your global stylesheet, for both light and dark. It is optional. If your project already defines these names, the components will use your values.

bash

npx shadcn@latest add https://turnui.xyz/r/theme.json

tokens

The components use only these eight, through ordinary Tailwind utilities such as bg-muted and text-muted-foreground.

token	used for	dark	light
background	Page, composer and popup surfaces.	#000000	#ffffff
foreground	Primary text, active borders, the default button.	#efefe4	#0a0a0a
muted	Quiet fills: user bubbles, code chips, hover rows.	#1a1a1a	#f2f2ee
muted-foreground	Secondary text, labels, placeholders.	#a3a3a3	#525252
border	Every hairline. Components use the plain border utility.	rgb(255 255 255 / 0.13)	rgb(0 0 0 / 0.12)
accent	Primary action: the send button, progress, the selected item.	#efefe4	#0a0a0a
accent-foreground	Text on top of accent.	#0a0a0a	#fafaf5
ring	Focus rings.	#efefe4	#0a0a0a

accent is the primary action

In a default shadcn theme, accent is a pale background used for hover states. In turn it is the strongest color on the page: the send button, upload progress and the selected item all use it. If you skip the theme and keep the default, those controls will look washed out. Set accent to your brand or primary color and accent-foreground to a color that reads on it.

what the tokens map to

If you set things up by hand, this is everything the components need. The theme item writes the variables; shadcn init adds the rest. The @custom-variant line matters: a few components use dark: variants, for example the code colors and the status text.

css

:root {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --muted: #f2f2ee;
  --muted-foreground: #525252;
  --border: rgb(0 0 0 / 0.12);
  --accent: #0a0a0a;
  --accent-foreground: #fafaf5;
  --ring: #0a0a0a;
}

.dark {
  --background: #000000;
  --foreground: #efefe4;
  --muted: #1a1a1a;
  --muted-foreground: #a3a3a3;
  --border: rgb(255 255 255 / 0.13);
  --accent: #efefe4;
  --accent-foreground: #0a0a0a;
  --ring: #efefe4;
}

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-ring: var(--ring);
}

@layer base {
  * { border-color: var(--border); }
}

shape, color and type

Corners are fixed at 4px for panels and 2px for inner items, in the markup of each component. They do not follow --radius, so a rounded theme will not change them. Search for rounded in a component to change its corners.
Status colors (success, warning, error) use Tailwind's emerald, amber and red directly, with darker shades on light backgrounds so text stays readable. They are not tokens. Edit them in the component if you want your own.
Code, durations and labels use font-mono. Define it in your theme if you want a specific monospace font.