Theme Provider

Enable dark mode and custom themes

Basic Usage

Layout

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

export default function RootLayout({ children }) {
	return (
		<html lang="en">
			<body>
				<ThemeProvider defaultTheme="light">{children}</ThemeProvider>
			</body>
		</html>
	)
}

Multiple Themes

Themes

import { ThemeProvider, type ThemeConfig } from '@creo-team/buzz-ui'

const themes: ThemeConfig[] = [
	{ value: 'light', label: 'Light', icon: () => null },
	{ value: 'dark', label: 'Dark', icon: () => null },
	{ value: 'umbro', label: 'Umbro', icon: () => null },
]

export default function RootLayout({ children }) {
	return (
		<ThemeProvider themes={themes} defaultTheme="umbro">{children}</ThemeProvider>
	)
}