Dark Mode
Enable dark mode via class and variables
Enable Provider
Provider
import { ThemeProvider } from '@creo-team/buzz-ui'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ThemeProvider defaultTheme="light">{children}</ThemeProvider>
</body>
</html>
)
}
Customize Dark Variables
globals.css
.dark {
--c-background: #111827
--c-text: #f9fafb
--c-text-secondary: #d1d5db
--c-surface: #1f2937
--c-surface-2: #374151
--c-border: #4b5563
--c-primary: #ef4444
--c-primary-hover: #dc2626
}