Theming

How theming works

A theme is the set of colors, fonts, and radius values layered on top of a style. You customize it by editing the color pairs in the Style collection — not on individual components. Because colors resolve through the active style, one edit updates every component that uses that token, in the right style and the right light/dark mode.

The three axes stay independent:

• Style (Nova…Lyra) — structure and density. See styles.
• Theme — the color/light/* + color/dark/* color pairs, fonts, and the radius ramp, all in the Style collection.
• Light/dark — the Mode collection (Light or Dark). It never holds colors of its own — it only switches between the Style collection's light and dark definitions.

Important: Make sure your main library file is open — the shadcn/ui kit Figma file where all your components live.

Editing your theme colors

You recolor a theme by editing the color/light/{token} and color/dark/{token} pairs in the Style collection. Each base pair aliases a Tailwind palette variable (the kit ships on the neutral family, with destructive on red). The custom/* and alpha/* tints under the same color/light|dark/* groups are aliases with opacity that point at those base tokens (custom/primary-muted is primary at 5%), so whatever you set a base token to, its tints follow in that style. There is nothing to recompute.

You can make an edit for one style (change the pair only in that style's mode) or across all 8 styles (change it in every mode).

Changing the primary color

Method 1: Use a Tailwind color

To change the primary color from Neutral to Blue:

1. Open the variables panel.
2. Switch to the Style collection.
3. Find color/light/primary and click its value field.
4. Select the colors/blue/600 variable from the Tailwind collection.
5. Find color/dark/primary and set it to colors/blue/600 as well.

After a moment, Figma updates the primary color for every component in that style. Every primary tint (custom/primary-muted, custom/primary-hover, custom/selected-wash, custom/primary-border) follows automatically, because those tokens are primary at a percentage rather than stored colors.

Method 2: Use a custom color

To change the primary color to a custom purple (#7C3AED):

1. Open the variables panel and switch to the Style collection.
2. Find color/light/primary, unlink its current value, and enter #7C3AED.
3. Find color/dark/primary, unlink its value, and enter #7C3AED.

This still works in kit 3.0: the primary tints alias color/light/primary and color/dark/primary themselves, so they pick up the purple too. If you plan to reuse the color elsewhere, the cleaner option is to add it to the Tailwind collection first (for example colors/brand/600) and alias it from the pair, which keeps every color in the file traceable to the palette.

Changing neutral colors

The kit itself ships on the neutral family: background, foreground, card, popover, secondary, muted, accent, border, input, ring, and the sidebar-* tokens alias colors/neutral/50 through colors/neutral/950 (plus colors/white and colors/black). One exception is kept on zinc: light muted-foreground aliases colors/zinc/500.

To move to Slate, Stone, Zinc, or another family, re-point those color/light/* and color/dark/* pairs in the Style collection to the same step of the new family (for example colors/neutral/200 to colors/slate/200). Do it in one style's mode or in all eight. The neutral tints in custom/* and alpha/* follow, since they are aliases with opacity on these base tokens. Tokens built from colors/white or colors/black at an opacity (dark border is colors/white at 10%, dark input is colors/white at 15%) are family-independent and need no change.

Changing the font family

Fonts are set once for the whole file. The defaults are Inter (sans and heading) and Geist Mono (mono).

1. Open the variables panel and switch to the Style collection.
2. Find the font/family/* variables (sans, serif, mono, heading).
3. Change the value to your preferred font (for example, sans to Roboto).

Enter the font family name exactly. The change applies file-wide.

Changing border radius

Radius is controlled by the per-style ramp radius/xs…4xl in the Style collection. Each style has its own ramp (Sera and Lyra are square; Luma and Maia are round). Components reference the ramp through the Tailwind collection's rounded/* aliases, so editing the ramp here restyles everything bound to it.

1. Open the variables panel and switch to the Style collection.
2. Find the radius/* ramp for the style you're editing.
3. Adjust the ramp steps to make components more or less rounded.

Using an inverted menu color

In shadcn/create you can invert menu color so select and dropdown menus appear dark in light mode. To do the same in the kit:

1. Open the Dropdown Menu component.
2. Select the DropdownMenu / Menu component.
3. In the Appearance panel, set its Mode to Dark.

Creating a custom theme

A custom theme is a new mode in the Style collection, based on any of the 8 built-in styles. This keeps your brand theme alongside the built-ins, so you can switch to it like any other style.

The fast way: import from globals.css

The quickest path is the Figma to shadcn/ui plugin:

1. Copy your theme's globals.css (for example from our Theme Generator or an existing project).
2. Open the plugin and go to the Import tab.
3. Choose Add as a new style, and pick which of the 8 styles to base it on (default Nova).
4. Paste the CSS and import. The plugin creates a new Style-collection mode with your colors, radius, and fonts applied.

Your brand theme now appears as a mode you can switch to on any page or frame. See the themes documentation for the full import walkthrough.

The manual way: add a Style mode

You can also add a mode by hand:

1. Open the Local variables panel and select the Style collection.
2. Click + in the modes header to add a new mode.
3. Rename it (for example, "Brand A" or "High Contrast").
4. Adjust the color/light/*, color/dark/*, font/family/*, and radius/* values to match your brand.

Adding a new color variable

If your brand truly needs a token that shadcn/ui doesn't have, add it consistently:

1. Add color/light/{name} and color/dark/{name} to the Style collection, each aliasing a Tailwind palette variable (add the color to the Tailwind collection first if the palette lacks it).
2. Add {name} (or custom/{name}) to the Mode collection, referencing the light/dark pair.
3. For a tint of it (a hover wash, a muted background), add color/light/custom/{name}-muted and its dark pair, alias the base token, and set the opacity percentage in the variable panel. This is Figma's alias with opacity, the same mechanism the kit's own custom/* tokens use, so the tint follows the base if you recolor later. Do not enter a flattened color.
4. Set the variable's scope so it appears where you need it.
5. Use it in components.
6. Export it to your globals.css with the Figma to shadcn/ui plugin.

Before adding new variables, check the existing shadcn/ui and custom/* tokens in the variables documentation — most needs are already covered, and unnecessary variables complicate a design system.

Working with text and effect styles

Typography and effects are delivered as Figma styles that reference the Style collection's variables.

• Text styles cover the full ramp, including mono and heading variants, using the font/family/*, font-weight/*, and text/* variables (sizes and pixel line-heights, including the lh-tight…lh-loose leading steps). Create a new one by styling a text element with those variables and saving it as a text style.
• Focus rings and shadows are effect styles (focus/* and shadow/*) with variables bound inside them. Apply the effect style to a component rather than rebuilding the effect by hand.

For long-form and markdown content, the kit also provides the Typeset system — see the Typeset documentation.

Dark mode

Switching between light and dark is a Mode collection change.

How it works

The kit ships Light and Dark modes in the Mode collection. Every custom/* and semantic token already carries both halves, so a single switch flips the whole design.

How to use

1. Select any page or frame.
2. Click the Change variables mode icon in the Layers panel.
3. Choose the Mode collection.
4. Select Light or Dark.

Multi-brand design systems

To maintain several brand themes in one file, add a mode per brand in the Style collection (as in "Creating a custom theme" above), then switch between them:

1. Select any page or frame.
2. Click the Change variables mode icon.
3. Choose the Style collection.
4. Select your brand mode (for example "Brand A").

Each brand keeps the full component structure while carrying its own colors, fonts, and radius.