Theme Builder

Create and customize themes for your design system. Modify colors, typography, spacing, and more. Preview your changes in real-time and export the theme in various formats.

Theme Configuration

Theme Name

Base Colors

Background

Foreground

Card

Card Foreground

Primary & Secondary

Primary

Primary Foreground

Secondary

Secondary Foreground

Accent & Muted

Accent

Accent Foreground

Muted

Muted Foreground

Utility Colors

Destructive

Destructive Foreground

Border

Input

Ring

Predefined Themes

Saved Themes

No saved themes yet

Save your current theme to see it here

Export Theme

:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --popover: #ffffff;
  --popover-foreground: #0f172a;
  --primary: #49664E;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #94a3b8;
  --radius: 0.5rem;
}