Theming

Components use five of shadcn's theme variables, through the matching Tailwind utilities such as bg-background and text-muted-foreground. If your project uses shadcn, components follow your theme with no extra setup.

Without shadcn, add them yourself. These neutral values match this site.

@custom-variant dark (&:is(.dark *));

:root {
  --background: #ffffff;
  --foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
}

.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
  --muted: #171717;
  --muted-foreground: #a3a3a3;
  --border: #262626;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
}

Dark mode is class-based, as in shadcn: a dark class on <html> switches every token. The @custom-variant line above makes Tailwind's dark: variant follow that class.

Toggle the class however you like, for example with next-themes and attribute="class".

Tokens cover the neutrals. Color that carries meaning, such as a gauge's arc, is a prop, usually accent. Each component page lists its props.

<Gauge value={72} accent="#2563eb" />

Change a token to restyle every component at once. Change a component's classes to restyle just that one: the file is yours, and most components also accept a className.

.dark {
  --muted: #18181b;
  --border: #27272a;
}