shadcn/ui Theme Generator
Pick a primary color and a neutral base, then see the whole theme applied to real components — cards, tables, forms, buttons — in both modes at once. Copy the CSS variables straight into your globals.css.
Used for primary buttons, focus rings and links.
Drives backgrounds, borders and muted text.
Sets --radius, in rem.
Preview
Both modes, side by side
Light
Workspace
Everything your team is working on.
+3 this week
+18 this month
| Name | Role | Status |
|---|---|---|
| DWDana Whitfield | Owner | Active |
| IBIlias Berg | Editor | Active |
| MTMei Tanaka | Viewer | Invited |
Dark
Workspace
Everything your team is working on.
+3 this week
+18 this month
| Name | Role | Status |
|---|---|---|
| DWDana Whitfield | Owner | Active |
| IBIlias Berg | Editor | Active |
| MTMei Tanaka | Viewer | Invited |
Output
Paste this into your globals.css, replacing the existing :root and .dark blocks.
:root {
--radius: 0.5rem;
--background: hsl(0 0% 100%);
--foreground: hsl(240 10% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(240 10% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(240 10% 3.9%);
--primary: hsl(238.7 83.5% 66.7%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(240 4.8% 95.9%);
--secondary-foreground: hsl(240 5.9% 10%);
--muted: hsl(240 4.8% 95.9%);
--muted-foreground: hsl(240 3.8% 46.1%);
--accent: hsl(240 4.8% 95.9%);
--accent-foreground: hsl(240 5.9% 10%);
--destructive: hsl(357.1 100% 45.3%);
--destructive-foreground: hsl(0 0% 100%);
--border: hsl(240 5.9% 90%);
--input: hsl(240 5.9% 90%);
--ring: hsl(238.7 83.5% 66.7%);
}
.dark {
--background: hsl(240 10% 3.9%);
--foreground: hsl(0 0% 98.0%);
--card: hsl(240 5.9% 10%);
--card-foreground: hsl(0 0% 98.0%);
--popover: hsl(240 5.9% 10%);
--popover-foreground: hsl(0 0% 98.0%);
--primary: hsl(238.7 83.5% 66.7%);
--primary-foreground: hsl(0 0% 100%);
--secondary: hsl(240 3.7% 15.9%);
--secondary-foreground: hsl(0 0% 98.0%);
--muted: hsl(240 3.7% 15.9%);
--muted-foreground: hsl(240 5.0% 64.9%);
--accent: hsl(240 3.7% 15.9%);
--accent-foreground: hsl(0 0% 98.0%);
--destructive: hsl(358.8 100% 69.6%);
--destructive-foreground: hsl(240 10% 3.9%);
--border: hsl(240 3.7% 15.9%);
--input: hsl(240 3.7% 15.9%);
--ring: hsl(238.7 83.5% 66.7%);
}Frequently asked
Where do I paste the output?
Into your globals.css, replacing the existing :root and .dark blocks. The variable names match what shadcn/ui components already expect, so nothing else needs to change.
Why does dark mode sometimes use a different primary color?
A color that reads well on white can disappear on a near-black background. When that happens the generator steps up your scale until the contrast reaches 3:1 and tells you which shade it picked. Light mode always keeps your original color.
What does the neutral base change?
Everything that is not your brand color: page and card backgrounds, borders, inputs, and muted text. Zinc and neutral are the most, well, neutral; slate leans blue, stone leans warm, gray sits between them.
Are the colors in HSL or OKLCH?
The output uses full hsl() values, which work in both Tailwind v3 and v4 and in every browser. If you prefer OKLCH you can convert the same values — the variable names stay identical.
Can I share a theme with someone?
Yes. The URL updates as you change the color, neutral and radius, so copying the address bar shares the exact theme you are looking at.