/shadcn-theming

name: shadcn-theming
description: "Use when defining or auditing shadcn/ui design tokens, OKLCH colors, or dark/light mode CSS variables."
versions:
  shadcn-ui: "4.x"
  tailwindcss: "4.3"
user-invocable: true
allowed-tools: Read, Write, Edit, Glob, Grep
references: references/theming-guide.md, references/templates/theme-setup.md
related-skills: shadcn-registries, shadcn-components

<objective> Design tokens and theming for shadcn/ui: CSS custom properties (`--background`, `--primary`, etc.), OKLCH wide-gamut colors, dark/light mode via the `.dark` class or `prefers-color-scheme`, and Tailwind v4 `@theme` directive integration — identical for the Base UI, Radix and React Aria bases. Also covers the 7 base colors, presets (`init --preset`, `apply --preset --only theme,font`), `migrate base-color`, `shadcn/tailwind.css` / `eject`, and shadcn/typeset for rendered markdown.

Documents the token hierarchy (component → semantic → primitive OKLCH values) and the validation checklist (dark-mode overrides, chart/sidebar variables, no hard-coded hex). </objective>

shadcn Theming

Agent Workflow (MANDATORY)

Before theming work, spawn agents in parallel, one `Agent` call each with a `name`:

1. **fuse-ai-pilot:explore-codebase** - Find existing theme tokens 2. **fuse-ai-pilot:research-expert** - Verify OKLCH patterns via Context7

After: Run **fuse-ai-pilot:sniper** for validation.

Overview

| Feature | Description | |---------|-------------| | **CSS Variables** | `--background`, `--foreground`, `--primary` | | **OKLCH Colors** | Wide-gamut P3 color space | | **Dark Mode** | `.dark` class or `prefers-color-scheme` | | **Tailwind v4** | `@theme inline` directive integration + `@custom-variant dark` | | **Base colors** | `tailwind.baseColor`: `neutral`, `stone`, `zinc`, `mauve`, `olive`, `mist`, `taupe` (set at init; switch with `migrate base-color --to <c>`) | | **Presets** | Short code bundling style, base color, theme, chart color, icons, fonts, radius, menu color/accent (build on ui.shadcn.com/create) | | **Radius scale** | `--radius` drives `--radius-sm` ... `--radius-4xl` via `@theme inline` |

Theme CLI (verified on shadcn 4.23.0)

{runner} shadcn@latest init --preset <code>                 # new project from a preset
{runner} shadcn@latest apply --preset <code>                # switch preset: reinstalls components, keeps base + RTL
{runner} shadcn@latest apply --preset <code> --only theme   # or --only font, --only theme,font
{runner} shadcn@latest preset decode <code>                 # also: resolve (current project), url, open
{runner} shadcn@latest migrate base-color --to zinc --yes   # rewrite theme CSS vars + baseColor
{runner} shadcn@latest init --no-css-variables              # inline utilities instead of tokens (install-time only)
{runner} shadcn@latest init --pointer                       # cursor: pointer on buttons (not part of presets)
{runner} shadcn@latest eject                                # inline shadcn/tailwind.css, drop the shadcn dependency

Critical Rules

1. **ALWAYS use OKLCH** color space for all tokens 2. **ALWAYS define dark mode** overrides for every token 3. **NEVER hard-code** hex or rgb in components 4. **USE @theme inline** directive for Tailwind v4 integration 5. **MAP semantic tokens** to primitive OKLCH values

Architecture

app/
├── globals.css         # :root + .dark token definitions
└── tailwind.config.ts  # Optional (v3) or @theme (v4)

-> See [theme-setup.md](references/templates/theme-setup.md) for complete theme

Token Hierarchy

Component: --card, --card-foreground, --button-*
    ↑
Semantic: --primary, --secondary, --accent, --muted
    ↑
Primitive: oklch(55% 0.20 260), oklch(98% 0.01 260)

Validation Checklist

[ ] CSS variables defined in :root
[ ] Dark mode overrides in .dark
[ ] OKLCH color space used
[ ] Chart variables (--chart-1 to --chart-5)
[ ] Sidebar variables if applicable
[ ] New tokens defined in :root + .dark AND exposed in @theme inline (--color-*)
[ ] No hard-coded hex in components

Best Practices

DO

• Use OKLCH for all colors
• Define semantic tokens mapped to primitives
• Provide dark mode overrides for all tokens
• Use `@theme inline` for Tailwind v4 integration

DON'T

• Hard-code hex or rgb values
• Skip dark mode definitions
• Mix color spaces (hex + oklch)
• Define tokens only in Tailwind config

Reference Guide

Concepts

| Topic | Reference | When to Consult | |-------|-----------|-----------------| | **Theming Guide** | [theming-guide.md](references/theming-guide.md) | CSS variables, OKLCH, base colors, new tokens, typeset |

Templates

| Template | When to Use | |----------|-------------| | [theme-setup.md](references/templates/theme-setup.md) | Complete theme configuration |