Creating a Theme
Project-specific themes override the default token palette. A theme only needs to define tokens that differ from the default.
Create a Theme File
Add a JSON file to registry/themes/. The filename becomes the theme slug. Only include tokens that differ from the default.
json
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "my-project",
"type": "registry:theme",
"cssVars": {
"light": {
"primary": "oklch(0.50 0.16 200)",
"primary-foreground": "oklch(0.985 0 0)",
"ring": "oklch(0.50 0.16 200)",
"chart-1": "oklch(0.50 0.16 200)"
},
"dark": {
"primary": "oklch(0.60 0.16 200)",
"primary-foreground": "oklch(0.147 0 0)",
"ring": "oklch(0.60 0.16 200)",
"chart-1": "oklch(0.60 0.16 200)"
}
}
}Token Format
All colors use OKLCH format: oklch(lightness chroma hue). See registry/themes/default.json for the full token list. Common overrides: primary, primary-foreground, ring, chart-1.
Build & Apply
Run pnpm generate:themes to inject CSS. Apply in a consumer project:
html
<html data-theme="my-project" class="dark">