Theming

Theming

ForgeUI's design system is built on CSS custom properties, making it trivial to customize every aspect of the visual design.

How Themes Work

All ForgeUI components reference CSS variables defined in your globals.css. Changing these variables instantly updates every component:

:root {
  --primary: #7C3AED;
  --secondary: #A855F7;
  --accent: #06B6D4;
  --background: #0A0A0A;
  --card: #111827;
  --text: #F9FAFB;
  --muted: #9CA3AF;
  --border: #1F2937;
  --radius: 12px;
}

Using Preset Themes

ForgeUI ships with 10 curated themes. Apply one via CLI:

npx forgeui theme cyberpunk

Or visit the Theme Engine to preview and export CSS variables.

Creating Custom Themes

You can create your own theme by overriding the CSS variables:

/* Custom brand theme */
:root {
  --primary: #FF6B35;
  --secondary: #F7C948;
  --accent: #1B998B;
  --background: #0D1117;
  --card: #161B22;
  --text: #E6EDF3;
}

Theme Tokens Reference