Color System

All available theme colors with usage examples

General Colors

Main app background

var(--background)

Class examples:

bg-backgroundtext-backgroundborder-backgroundring-backgroundhover:bg-backgroundfocus:border-background

Main text color

var(--foreground)

Class examples:

text-foregroundhover:text-foregrounddecoration-foreground

Cards and Popovers

Card background

var(--card)

Class examples:

bg-cardtext-cardborder-cardring-cardhover:bg-cardfocus:border-card

Card text

var(--card-foreground)

Class examples:

text-card-foregroundhover:text-card-foregrounddecoration-card-foreground

Popover background

var(--popover)

Class examples:

bg-popovertext-popoverborder-popoverring-popoverhover:bg-popoverfocus:border-popover

Popover text

var(--popover-foreground)

Class examples:

text-popover-foregroundhover:text-popover-foregrounddecoration-popover-foreground

Accent Colors

Primary accent color

var(--primary)

Class examples:

bg-primarytext-primaryborder-primaryring-primaryhover:bg-primaryfocus:border-primary

Text on primary

var(--primary-foreground)

Class examples:

text-primary-foregroundhover:text-primary-foregrounddecoration-primary-foreground

Secondary color

var(--secondary)

Class examples:

bg-secondarytext-secondaryborder-secondaryring-secondaryhover:bg-secondaryfocus:border-secondary

Text on secondary

var(--secondary-foreground)

Class examples:

text-secondary-foregroundhover:text-secondary-foregrounddecoration-secondary-foreground

Accent highlight color

var(--accent)

Class examples:

bg-accenttext-accentborder-accentring-accenthover:bg-accentfocus:border-accent

Text on accent

var(--accent-foreground)

Class examples:

text-accent-foregroundhover:text-accent-foregrounddecoration-accent-foreground

Service Colors

Muted background

var(--muted)

Class examples:

bg-mutedtext-mutedborder-mutedring-mutedhover:bg-mutedfocus:border-muted

Muted text

var(--muted-foreground)

Class examples:

text-muted-foregroundhover:text-muted-foregrounddecoration-muted-foreground

Destructive/error color

var(--destructive)

Class examples:

bg-destructivetext-destructiveborder-destructivering-destructivehover:bg-destructivefocus:border-destructive

Text on destructive

var(--destructive-foreground)

Class examples:

text-destructive-foregroundhover:text-destructive-foregrounddecoration-destructive-foreground

Borders and Forms

Border color

var(--border)

Class examples:

bg-bordertext-borderborder-borderring-borderhover:bg-borderfocus:border-border

Input background

var(--input)

Class examples:

bg-inputtext-inputborder-inputring-inputhover:bg-inputfocus:border-input

Focus ring color

var(--ring)

Class examples:

bg-ringtext-ringborder-ringring-ringhover:bg-ringfocus:border-ring

Demonstration

Card Example

Example card using theme colors