Customize

Themes

Pick a preset or tweak individual tokens. Copy the CSS variables into your globals.cssand you're done.

Presets

Brand

38 92% 50%

Brand Foreground

20 14% 4%

Brand Muted

38 30% 12%

Surfaces

Background

222 14% 7%

Foreground

210 20% 94%

Card

222 14% 10%

Card Foreground

210 20% 94%

Muted

222 14% 14%

Muted Foreground

222 10% 58%

Controls

Primary

38 92% 50%

Primary Foreground

20 14% 4%

Secondary

222 14% 14%

Secondary Foreground

210 20% 94%

Accent

222 14% 16%

Accent Foreground

210 20% 94%

Destructive

0 55% 45%

Structure

Border

222 14% 16%

Input

222 14% 16%

Ring

38 92% 50%

Preview

Card Title

This is a preview of how your theme looks.

Output

:root {
    --brand: 38 92% 50%;
    --brand-foreground: 20 14% 4%;
    --brand-muted: 38 60% 92%;
    --background: 0 0% 99%;
    --foreground: 224 14% 10%;
    --card: 0 0% 100%;
    --card-foreground: 224 14% 10%;
    --muted: 220 10% 95%;
    --muted-foreground: 220 10% 40%;
    --primary: 38 92% 50%;
    --primary-foreground: 20 14% 4%;
    --secondary: 220 10% 96%;
    --secondary-foreground: 224 14% 10%;
    --accent: 220 10% 96%;
    --accent-foreground: 224 14% 10%;
    --destructive: 0 72% 51%;
    --border: 220 10% 89%;
    --input: 220 10% 89%;
    --ring: 38 92% 50%;
}

.dark {
    --brand: 38 92% 50%;
    --brand-foreground: 20 14% 4%;
    --brand-muted: 38 30% 12%;
    --background: 222 14% 7%;
    --foreground: 210 20% 94%;
    --card: 222 14% 10%;
    --card-foreground: 210 20% 94%;
    --muted: 222 14% 14%;
    --muted-foreground: 222 10% 58%;
    --primary: 38 92% 50%;
    --primary-foreground: 20 14% 4%;
    --secondary: 222 14% 14%;
    --secondary-foreground: 210 20% 94%;
    --accent: 222 14% 16%;
    --accent-foreground: 210 20% 94%;
    --destructive: 0 55% 45%;
    --border: 222 14% 16%;
    --input: 222 14% 16%;
    --ring: 38 92% 50%;
}