Colors and tokens

The Color page lists every shadcn/ui color token in your system, plus the custom tokens you add. Light and dark are two independent palettes, and every edit lands in the one you are editing.

Edit a token

1. Open Color in the left nav.
2. In the Editing panel, pick Light or Dark. The canvas switches with it, and every edit below lands in that palette.
3. Find the token in its section and click its color field.
4. Change the color in the picker. The canvas updates while you drag, and one drag is one undo step.

The tokens are grouped into sections: Custom, Base, Card & Popover, Primary, secondary, muted, accent, Destructive, Border, input, ring, Charts and Sidebar. Click a section header to fold it. Hover a token's name to see its full CSS variable, like --sidebar-primary-foreground.

A dot beside a token's name marks an override. Click the dot to reset that token to the style default. To clear every override in one palette, run Reset every light color override (or the dark one) from the command menu.

Base color

The first row, Base color, picks the neutral ramp every token starts from: Neutral, Stone, Zinc, Mauve, Olive, Mist or Taupe. Each option shows a sample of its background, muted, border and foreground colors. Switching re-seeds every token you have not overridden. Tokens you set keep your values.

The color picker

On the Color page the picker opens on its Custom tab:

• A color field with hue and opacity rails.
• An eyedropper button that picks a color from anywhere on your screen, in browsers that support it.
• A notation switch for OKLCH, HEX, RGB and HSL. Type or paste a value in any of them. The trailing cell of the field is the opacity.
• Three swatch rows. Light and Dark show every color already used in each palette. Recent holds the last 16 colors you committed. Click a swatch to copy its value.

The Tokens tab is a searchable list: Semantic (the shadcn/ui tokens), Custom (yours) and Palette (Tailwind's default color scales, folded until you open it or search). On the Color page, picking a token copies its value. It is a snapshot: if the source token changes later, the copy does not follow.

DS Manager stores every color as OKLCH, whatever notation you typed it in.

Copy from the other mode

Each token row ends with a copy button. It copies the token's value from the palette you are not editing, for example "Copy --primary from the dark palette". Hover it to see the value first. Use it to start a dark palette from your light one, then adjust.

Check contrast

With the canvas on Docs, the first section, Foreground on background, draws each text-on-surface pair: foreground on background, card-foreground on card, primary-foreground on primary, and the rest. Each card shows the WCAG contrast ratio and its level: AAA, AA, AA large or Fails. A custom pair you name like highlight and highlight-foreground gets a contrast card too.

Custom tokens

1. Click + (Add a custom token) in the Custom section header.
2. Choose Solid or Gradient.
3. Type a Name, like brand or brand-subtle.
4. For a solid color, set the Light theme and Dark theme values.
5. Click Add token.

A custom color always has a light and a dark value, so it can never be half-defined. Names follow these rules:

• Lowercase kebab-case, up to 48 characters.
• Not a shadcn/ui token name, such as primary or radius.
• Not starting with a Tailwind namespace, such as color-, font-, text-, shadow-, radius-, spacing- or chart-. The dialog tells you when a name hits one.
• Unique across colors and gradients, which share one set of names.

To rename a token, click its name and use Rename token. Gradient stops that reference it follow the rename. A component edit or a utility in your code that uses the old name has to be updated by hand. The trash button deletes the token.

Custom colors appear in the Tokens tab of every picker, including the Background, Text and Border controls when you edit components.

Gradients

A gradient token is an angle and a list of stops.

1. In the add dialog, choose Gradient and type a name, like brand-glow.
2. Set the Angle, from 0 to 360 degrees.
3. For each stop, set a Position from 0 to 100% and a Color. Use the arrows to reorder stops and Add stop for more. A gradient needs at least 2.
4. Click Add token.

A stop's color can be a token or a fixed color. Pick a token from the Tokens tab and the stop follows your palette in light and dark. Set a color on the Custom tab and it is fixed for the mode you are editing, so you can give dark mode its own stop colors.

Click a gradient's row to edit it later. Changes apply to the canvas as you make them; click Done to close. When you style a component, gradients show up as a group in the Background picker.

How tokens land in globals.css

When you publish, every token becomes a CSS variable. Light values go in :root, dark values in .dark, and each color gets a --color-* mapping in @theme inline, which is what makes bg-primary or bg-brand a working Tailwind utility. A gradient publishes as --background-image-<name>, so bg-brand-glow works too.

@theme inline {
  --color-brand: var(--brand);
  --background-image-brand-glow: linear-gradient(90deg, var(--primary) 0%, var(--brand-glow-stop-2) 100%);
}

:root {
  --primary: oklch(0.55 0.18 265);
  --brand: oklch(0.62 0.2 30);
  --brand-glow-stop-2: oklch(0.8 0.12 60);
}

.dark {
  --primary: oklch(0.7 0.15 265);
  --brand: oklch(0.7 0.18 30);
  --brand-glow-stop-2: oklch(0.6 0.1 60);
}

Token stops reference the token's variable. Fixed stops get their own --<name>-stop-<n> variable per mode.

To read the whole file before you publish, click Get code in the top bar and open the Get CSS tab. It shows the compiled globals.css. Component edits ship inside the registry components, not in this file. See Publish and install for the install command.