Guides

Theming

Toggle light mode with the .light class on html or use next-themes.

Live preview

Semantic tokens drive every primitive below.

Badge

next-themes

tsx

import { ThemeProvider } from "next-themes"

export function AppProviders({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem={false}>
      {children}
    </ThemeProvider>
  )
}