Theming

CSS variables, not hardcoded colors

shadcn/ui themes with CSS variables. Instead of literal colors, components reference semantic tokens like bg-background, text-foreground, and border-border. The variables live in your global stylesheet (usually app/globals.css) and are exposed to Tailwind via the @theme inline directive. Because Beste assets only use these tokens, they match your brand the moment you drop them in.

The background / foreground convention

Tokens come in pairs. The base name is the surface color; the -foreground variant is the text and icon color that sits on that surface. So --primary is a button background and --primary-foreground is its label. The main tokens:

• --background / --foreground — the page surface and its text.
• --card, --popover — elevated surfaces (each with a -foreground).
• --primary, --secondary, --accent, --muted — emphasis levels.
• --destructive, --border, --input, --ring — states and controls.
• --radius — the base corner radius the whole system derives from.

What the tokens look like

shadcn defines them in :root and overrides them under .dark. Modern themes use the OKLCH color space for perceptually even colors across light and dark:

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --border: oklch(0.922 0 0);
  /* ...card, popover, secondary, accent, destructive, input, ring... */
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* same tokens, dark values */
}

Customizing

Two dials cover most needs. Change --primary (and its -foreground) to recolor accents across every block, and change --radius to make the whole UI sharper or rounder. To add a brand token, define it under :root and .dark, expose it with @theme inline, and a matching utility (like bg-brand) becomes available. The shadcn theming guide covers this in depth, and the color reference lists every token.

Dark mode

There is nothing extra to do. Dark mode is just the .dark token overrides, so every Beste block is dark-ready as long as your app toggles the dark class (for example with next-themes). Many asset pages also include a live theme picker so you can preview a block against different tokens before installing.

Tones

Some Beste pieces and components expose a tone prop (for example neutral) that swaps a small set of token classes so the same component can read as quiet or prominent without new CSS. Where a tone picker exists, you will see it in the preview on the asset page.