Skip to content
Theme Editor
⌘E
Background
L 0.5
C 0.2
H 250
Foreground
L 0.5
C 0.2
H 250
Primary
L 0.5
C 0.2
H 250
Primary FG
L 0.5
C 0.2
H 250
Secondary
L 0.5
C 0.2
H 250
Secondary FG
L 0.5
C 0.2
H 250
Accent
L 0.5
C 0.2
H 250
Accent FG
L 0.5
C 0.2
H 250
Card
L 0.5
C 0.2
H 250
Card FG
L 0.5
C 0.2
H 250
Popover
L 0.5
C 0.2
H 250
Popover FG
L 0.5
C 0.2
H 250
Muted
L 0.5
C 0.2
H 250
Muted FG
L 0.5
C 0.2
H 250
Border
L 0.5
C 0.2
H 250
Input
L 0.5
C 0.2
H 250
Ring
L 0.5
C 0.2
H 250
Destructive
L 0.5
C 0.2
H 250
Destructive FG
L 0.5
C 0.2
H 250
Chart 1
L 0.5
C 0.2
H 250
Chart 2
L 0.5
C 0.2
H 250
Chart 3
L 0.5
C 0.2
H 250
Chart 4
L 0.5
C 0.2
H 250
Chart 5
L 0.5
C 0.2
H 250

Themes

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)