Theming

Every colour prop accepts any CSS colour, including var(--token):

<MeshGradient
  colors={["var(--primary)", "var(--chart-2)", "var(--chart-4)"]}
  background="var(--background)"
/>

colors takes two to six colours. background is the base colour under them.

Dark mode

Define the variables once per mode:

:root {
  --primary: oklch(0.55 0.22 264);
  --background: oklch(0.98 0 0);
}

.dark {
  --primary: oklch(0.7 0.18 264);
  --background: oklch(0.14 0 0);
}

Free components re-read the variables when the class or style attribute on <html> changes, so next-themes with attribute="class" and shadcn's dark mode both work. A switcher that only sets data-theme needs to toggle a class too.

Pro palettes

Pro components ship curated palettes with a light and a dark version. They follow a dark or light class or data-theme on <html>, then the system setting. Pin one with appearance on backgrounds, scheme on dither elements or tint on Glass Panel. Each component's props table lists which it takes.