Design System

Theme Generator

Create complete color themes for your website. Generate light and dark mode palettes, export as CSS variables.

Preview:
Presets
Live Preview (Light)
A
AppName

Welcome Back

Here is what is happening with your projects.

Revenue

$24,500

Users

1,234

!Warning: Storage limit reached
Edit Light Theme
CSS Variables
1:root {
2  /* Light theme */
3  --background: 0 0% 100%;
4  --foreground: 222 47% 11%;
5  --primary: 239 84% 67%;
6  --primary-foreground: 0 0% 100%;
7  --secondary: 210 40% 96%;
8  --secondary-foreground: 222 47% 11%;
9  --accent: 210 40% 96%;
10  --accent-foreground: 222 47% 11%;
11  --muted: 210 40% 96%;
12  --muted-foreground: 215 16% 47%;
13  --destructive: 0 84% 60%;
14  --destructive-foreground: 0 0% 100%;
15  --border: 214 32% 91%;
16  --ring: 239 84% 67%;
17}
18

19.dark {
20  /* Dark theme */
21  --background: 222 47% 11%;
22  --foreground: 210 40% 98%;
23  --primary: 234 89% 74%;
24  --primary-foreground: 0 0% 0%;
25  --secondary: 217 33% 17%;
26  --secondary-foreground: 210 40% 98%;
27  --accent: 217 33% 17%;
28  --accent-foreground: 210 40% 98%;
29  --muted: 217 33% 17%;
30  --muted-foreground: 215 20% 65%;
31  --destructive: 0 91% 71%;
32  --destructive-foreground: 0 0% 100%;
33  --border: 217 33% 17%;
34  --ring: 234 89% 74%;
35}

How to Use

  1. Start by picking a primary color or choosing a preset theme
  2. Fine-tune individual colors for both light and dark modes
  3. Preview your theme with the live component preview
  4. Copy the CSS variables and add them to your globals.css file
  5. Configure Tailwind to use the CSS variables