# Colors and tokens

> Edit design tokens in light and dark, pick shadcn theme colors with swatches and an eyedropper, add custom tokens and gradients, and see them in globals.css.

Canonical: https://www.shadcndesign.com/docs/ds-manager-colors

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

<RichImage
  src="/docs/ds-manager/colors-picker.webp"
  alt="DS Manager Color page with the color picker open on --primary, showing the Tokens and Custom tabs, the color field with hue and opacity rails, the OKLCH value field and the Light, Dark and Recent swatch rows"
  width="899"
  height="732"
  quality="90"
/>

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](/docs/ds-manager-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.

```css
@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](/docs/ds-manager-publish) for the install command.