Theme Generator

Choose a preset, make it yours, then export both light and dark modes.

Choose, customize, export

1

Choose

Start with a curated visual preset that already includes light and dark modes.

2

Customize

Fine-tune individual colors and corner radius while the preview updates instantly.

3

Export

Copy AI-ready instructions, with technical code options when you need them.

What each color controls

Plain-language roles help you customize safely. The exported code contains the technical variable names your project needs.

Background--background
Page background.
Foreground--foreground
Default page text.
Card--card
Card and panel surfaces.
Card foreground--card-foreground
Text inside cards.
Popover--popover
Menus, dialogs, and floating surfaces.
Popover foreground--popover-foreground
Text inside floating surfaces.
Primary--primary
Main actions and selected states.
Primary foreground--primary-foreground
Text and icons on primary actions.
Secondary--secondary
Lower-emphasis filled controls.
Secondary foreground--secondary-foreground
Text and icons on secondary controls.
Accent--accent
Hover and highlighted surfaces.
Accent foreground--accent-foreground
Text and icons on highlighted surfaces.
Destructive--destructive
Errors and destructive actions.
Muted--muted
Quiet backgrounds and disabled surfaces.
Muted foreground--muted-foreground
Secondary text and placeholders.
Border--border
Card borders and separators.
Input--input
Form control borders.
Ring--ring
Keyboard focus rings.
Chart 1--chart-1
First data series.
Chart 2--chart-2
Second data series.
Chart 3--chart-3
Third data series.
Chart 4--chart-4
Fourth data series.
Chart 5--chart-5
Fifth data series.
Sidebar--sidebar
Sidebar background.
Sidebar foreground--sidebar-foreground
Default sidebar text.
Sidebar primary--sidebar-primary
Selected sidebar actions.
Sidebar primary foreground--sidebar-primary-foreground
Text on selected sidebar actions.
Sidebar accent--sidebar-accent
Sidebar hover surfaces.
Sidebar accent foreground--sidebar-accent-foreground
Text on sidebar hover surfaces.
Sidebar border--sidebar-border
Sidebar borders and separators.
Sidebar ring--sidebar-ring
Sidebar focus rings.