Theme tokens

AniUI exposes its design system as CSS custom properties. Override any of them at the :root level (or scoped to a subtree) to retheme everything downstream — buttons, cards, inputs, all of it.

The token surface

:root {
  /* Surfaces */
  --background: 240 17% 4%;
  --foreground: 220 14% 96%;
  --card: 240 14% 7%;
  --border: 240 6% 18%;

  /* Brand */
  --primary: 239 84% 67%;
  --primary-foreground: 220 14% 96%;

  /* States */
  --destructive: 0 70% 55%;
  --muted: 240 6% 14%;
  --muted-foreground: 220 9% 60%;

  /* Layout */
  --radius: 0.75rem;
}

Values are HSL channels without the wrapper function — that lets us compose with opacity in the consuming components: hsl(var(--primary) / 0.5).

Tailwind integration

If you're using Tailwind, your tailwind.config.ts reads the same variables:

theme: {
  extend: {
    colors: {
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
    },
  },
}

Override a single token

Want a custom primary color? Set the variable in your global stylesheet — every AniUI component picks it up:

:root {
  --primary: 16 90% 55%; /* warm orange */
}

See Custom palettes for the OKLCH-based scale generation we use.