ThemeProvider

src/components/theme.tsx

Import

import { ThemeProvider } from "@ossrandom/design-system";

Examples

Default

Mount once near the root. The provider stamps `data-theme` on `<html>`.

↗ Playground

(() => {
  function Demo() {
    const { mode, toggle } = useTheme();
    return <Space size="sm">
      <Badge tone="info">{mode}</Badge>
      <Button onClick={toggle}>Toggle theme</Button>
    </Space>;
  }
  return <Demo />;
})()

API

Prop	Type
`mode`	`ThemeMode`
`accent`	`BrandColor`
`fontFamily`	`{ readonly sans: string; readonly mono: string }`
`children` required	`ReactNode`