Colors

HeroUI Native uses CSS variables for colors that automatically switch between light and dark themes. All colors use the oklch color space for better color transitions.

How It Works

HeroUI Native's color system is built on top of Tailwind CSS v4's theme via Uniwind. When you import heroui-native/styles, it uses Tailwind's built-in color palettes and maps them to semantic variables.

Naming pattern:

Colors without a suffix are backgrounds (e.g., --accent)
Colors with -foreground are for text on that background (e.g., --accent-foreground)

Usage:

import { View, Text } from 'react-native';

// This gives you the right background and text colors
<View className="bg-background flex-1">
  <View className="bg-accent p-4 rounded-lg">
    <Text className="text-accent-foreground">Hello</Text>
  </View>
</View>

Base Colors

These four colors stay the same in all themes:

--white

--black

--snow

--eclipse

Background & Surface

--background

--foreground

--surface

--surface-foreground

--overlay

--overlay-foreground

Primary Colors

Accent — Your main brand color (used for primary actions) Accent Soft — A lighter version for secondary actions

--accent

--accent-foreground

--accent-soft

--accent-soft-foreground

Status Colors

For alerts, validation, and status messages:

--success

--success-foreground

--warning

--warning-foreground

--danger

--danger-foreground

Form Field Colors

For consistent form field styling across input components:

--field-background

--field-foreground

--field-placeholder

--field-border

Other Colors

--default

--default-foreground

--muted

--border

--focus

--link

How to Use Colors

In your components:

import { View, Text } from 'react-native';
import { Button } from 'heroui-native';

<View className="bg-background flex-1 p-4">
  <Text className="text-foreground mb-4">Content</Text>
  <Button variant="primary" className="bg-accent">
    <Button.Label className="text-accent-foreground">Click me</Button.Label>
  </Button>
</View>

In CSS files:

global.css

/* Direct CSS variables */
.container {
  flex: 1;
  background-color: var(--accent);
  width: 50px;
  height: 50px;
  border-radius: var(--radius);
}

Default Theme

The complete theme definition can be found in (variables.css). This theme automatically switches between light and dark modes through Uniwind's theming system, which supports system preferences and programmatic theme switching.

@theme {
  /* Primitive Colors (Do not change between light and dark) */
  --white: oklch(100% 0 0);
  --black: oklch(0% 0 0);
  --snow: oklch(0.9911 0 0);

Customizing Colors

Override existing colors:

@layer theme {
  @variant light {
    /* Override default colors */
    --accent: oklch(0.65 0.25 270); /* Custom indigo accent */
    --success: oklch(0.65 0.15 155);
  }

  @variant dark {
    /* Override dark theme colors */
    --accent: oklch(0.65 0.25 270);
    --success: oklch(0.75 0.12 155);
  }
}

Tip: Convert colors at oklch.com

Add your own colors:

@layer theme {
  @variant light {
    --info: oklch(0.6 0.15 210);
    --info-foreground: oklch(0.98 0 0);
  }

  @variant dark {
    --info: oklch(0.7 0.12 210);
    --info-foreground: oklch(0.15 0 0);
  }
}

@theme inline {
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
}

Now you can use it:

import { View, Text } from 'react-native';

<View className="bg-info p-4 rounded-lg">
  <Text className="text-info-foreground">Info message</Text>
</View>

Note: To learn more about theme variables and how they work in Tailwind CSS v4, see the Tailwind CSS Theme documentation.

Quick Tips

Always use color variables, not hard-coded values
Use foreground/background pairs for good contrast
Test in both light and dark modes
The system respects user's theme preference automatically

Theming - Learn about the theming system
Styling - Styling components with CSS
Design Principles - Understanding HeroUI's design philosophy

On this page