Theming

Theme Presets

Default

Rome

Berlin

Tokyo

Copy Code

Primary Theme Colors

Background

var(--background)

Foreground

var(--foreground)

Primary

var(--primary)

Primary Foreground

var(--primary-foreground)

Secondary & Accent Colors

Secondary

var(--secondary)

Secondary Foreground

var(--secondary-foreground)

Accent

var(--accent)

Accent Foreground

var(--accent-foreground)

UI Component Colors

Card

var(--card)

Card Foreground

var(--card-foreground)

Popover

var(--popover)

Popover Foreground

var(--popover-foreground)

Muted

var(--muted)

Muted Foreground

var(--muted-foreground)

Utility & Form Colors

Border

var(--border)

Input

var(--input)

Ring

var(--ring)

Status & Feedback Colors

Destructive

var(--destructive)

Destructive Foreground

Chart & Visualization Colors

Chart 1

var(--chart-1)

Chart 2

var(--chart-2)

Chart 3

var(--chart-3)

Chart 4

var(--chart-4)

Chart 5

var(--chart-5)

Footer Colors

Footer Background

Footer Foreground

Footer Primary

Footer Primary Foreground

Footer Accent

Footer Accent Foreground

Footer Border

Footer Ring