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