DEVELOPMENT PREVIEWIn development

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
}