shadcn/ui Theme Colors: Map a Palette to CSS Variables

In a shadcn/ui project, semantic CSS variables let shared components follow the product theme. Instead of changing a button in every component, define values such as background, foreground, primary, muted, border, and ring in the global theme stylesheet.

Map colors to component roles

:root {
  --background: oklch(0.99 0.005 280);
  --foreground: oklch(0.2 0.015 280);
  --primary: oklch(0.55 0.2 285);
  --primary-foreground: oklch(0.99 0.005 280);
  --muted: oklch(0.95 0.01 280);
  --muted-foreground: oklch(0.45 0.02 280);
  --border: oklch(0.89 0.012 280);
  --ring: oklch(0.55 0.2 285);
}

This is a starting example, not a drop-in replacement for every project's full variable list. Keep the foreground paired with the surface it appears on, and update the dark theme separately rather than assuming the light values will invert well.

Check the parts that are easy to miss

Review muted text, borders, destructive actions, focus rings, and selected states—not only the primary button. Test components in both themes and make sure a change to one token does not make a quiet interface element disappear.

Follow the current shadcn/ui theming guide for the variable set used by your project. LiveTheme can help preview and export a shadcn/ui theme; verify the generated variables against your own setup.