Theming

Customize colors using CSS variables and Tailwind classes.

How It Works

AniUI uses CSS custom properties (variables) defined in global.css. These map to Tailwind utility classes through your tailwind.config.js. Colors use HSL format without the hsl() wrapper so Tailwind can apply opacity modifiers.

Convention

Each color has a background and foreground pair. Use the background color for surfaces and the foreground for text on that surface:

<View className="bg-primary">
  <Text className="text-primary-foreground">Button text</Text>
</View>
<View className="bg-card">
  <Text className="text-card-foreground">Card content</Text>
</View>

Available Tokens

PropTypeDefault

--background

bg-background / text-foreground

Page background

--primary

bg-primary / text-primary-foreground

Buttons, links

--secondary

bg-secondary / text-secondary-foreground

Secondary actions

--muted

bg-muted / text-muted-foreground

Subtle backgrounds, helper text

--accent

bg-accent / text-accent-foreground

Highlights, hover states

--destructive

bg-destructive / text-destructive-foreground

Errors, delete actions

--card

bg-card / text-card-foreground

Card surfaces

--border

border-border

Borders, dividers

--input

bg-input

Input backgrounds

Theme Presets

Switch presets with the CLI. Each preset changes the primary color while keeping the neutral palette consistent:

npx @aniui/cli theme

Default — Neutral dark/light
Blue — Primary: #3B82F6
Green — Primary: #22C55E
Orange — Primary: #F97316
Rose — Primary: #F43F5E

Custom Colors

To create your own theme, edit the CSS variables in global.css. Values use HSL format (hue saturation% lightness%) without the hsl() wrapper:

global.css

:root {
  --primary: 262 83% 58%;          /* purple */
  --primary-foreground: 0 0% 100%; /* white text on purple */
}
.dark {
  --primary: 262 83% 68%;          /* lighter purple for dark mode */
  --primary-foreground: 0 0% 100%;
}

No other config changes needed — Tailwind picks up the new values automatically since tailwind.config.js references hsl(var(--primary)).