Two groups of shadcn/ui tokens are easy to overlook until you need them: the five chart colors and the eight sidebar colors. Both are part of every theme on this site, and both are worth tuning on purpose.
Chart colors
--chart-1 through --chart-5 are the default series colors for shadcn's chart components, which wrap Recharts. You reference them through the chart config:
import { type ChartConfig } from "@/components/ui/chart"
const chartConfig = {
desktop: { label: "Desktop", color: "var(--chart-1)" },
mobile: { label: "Mobile", color: "var(--chart-2)" },
} satisfies ChartConfig
ChartContainer exposes each series as --color-desktop, --color-mobile and so on, so bars and lines use fill="var(--color-desktop)", and they switch with the theme and with dark mode automatically.
Picking good chart colors
- Make them distinguishable. Space the five colors around the hue wheel, and vary their lightness, so they stay distinct for color-blind users and in grayscale.
- Lead with your brand.
chart-1shows up most often, so making it your primary (or close to it) ties charts to the rest of the UI. - Tune dark mode separately. Series colors usually need a little more lightness on dark backgrounds.
- Monochrome works too. A single hue in five lightness steps looks elegant for dashboards that only ever show one or two series at a time.
Sidebar colors
The sidebar component has its own set of tokens so it can differ from the main content area:
| Token | Used for |
|---|---|
sidebar / sidebar-foreground | The sidebar surface and its text |
sidebar-primary / sidebar-primary-foreground | Prominent elements, such as the logo tile or an active item |
sidebar-accent / sidebar-accent-foreground | Hovered and selected menu items |
sidebar-border | The divider and internal borders |
sidebar-ring | Focus rings inside the sidebar |
Common patterns:
- Blend in: set
sidebarslightly darker thanbackgroundin light mode (and slightly lighter in dark mode) for a subtle separation. - Contrast: a dark sidebar next to a light content area, an "inverted" sidebar, is easy. Just make sure the sidebar foreground pairs still pass contrast.
- Match the base: the editor's Match base switch copies background, foreground, primary, accent, border and ring into the sidebar tokens, and keeps them in sync while you edit.
See both in action on any theme's App preview tab, or tune them in the editor's Charts and Sidebar sections.