DEVELOPMENT PREVIEWIn development

Theme System

Understanding Buzz UI's powerful and flexible theming capabilities.

Do You Need the Theme Provider?

💡 It Depends on Your Needs

✅ Use ThemeProvider if you want:

  • • Dark mode switching
  • • Multiple theme variants
  • • Persistent theme preferences
  • • Runtime theme switching

❌ Skip ThemeProvider if you have:

  • • Static theme (no switching needed)
  • • Custom theme management
  • • Just using CSS variables directly

Centralized Design System

Yes! Buzz UI has a completely centralized design system with customizable:

🎨 Color Palette

--c-primary
--c-success
--c-warning
--c-danger

📐 Design Tokens

--radius-sm6px
--radius-md8px
--radius-lg10px
--shadow-mdDrop shadows

Easy Customization

Make Everything More Rounded

More Rounded Design
:root {
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

Create a Purple Theme

Purple Color Scheme
:root {
  --c-primary: #7c3aed;
  --c-primary-hover: #6d28d9;
  --c-primary-light: #f3e8ff;
}

.dark {
  --c-primary: #a855f7;
  --c-primary-hover: #9333ea;
}

Customize Shadows

Custom Shadow System
:root {
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.15);
  --shadow-lg: 0 16px 32px rgba(0,0,0,0.2);
}

Theme Options

Option 1: CSS Variables Only

Use just the CSS variables without the theme provider:

CSS Variables Approach
/* Add to your globals.css */
:root {
  --c-primary: #your-color;
  --radius-md: 12px;
}

/* Use in components */
.my-button {
  background: var(--c-primary);
  border-radius: var(--radius-md);
}
✅ Simple • ✅ No JS overhead • ❌ No runtime switching

Option 2: Theme Provider

Use the theme provider for dynamic theme switching:

Theme Provider Setup
import { ThemeProvider } from '@creo-team/buzz-ui'

export default function App({ children }) {
  return (
    <ThemeProvider defaultTheme="light">
      {children}
    </ThemeProvider>
  )
}
✅ Runtime switching • ✅ Persistent preferences • ✅ Multiple themes

🎨 Custom Colors

Learn how to customize the color palette.

Color Guide →

🔧 Design Tokens

Complete reference of all design tokens.

Token Reference →

🌙 Dark Mode

Set up dark mode with theme switching.

Dark Mode Guide →