# Theme

Canonical page: https://docs.ovok.com/native-sdk/guide/modules/theme

`@ovok/native/theme` gives every SDK component its colors, spacing, corner radii and
fonts. It builds on React Native Paper's Material Design 3 theme and adds color
scales, semantic `success` / `warning` / `error` colors and multiplier-based spacing.

## Set up the theme [#set-up-the-theme]

Wrap the app once, outside any SDK screen. `ThemeProvider` takes the theme
configuration, loads the DM Sans fonts and renders nothing until they are ready, so
place it above your splash-screen logic.

```tsx
import { DEFAULT_COLORS, DEFAULT_MULTIPLIERS, ThemeProvider } from "@ovok/native";

const theme = {
  colors: { ...DEFAULT_COLORS, primary: "#2563EB" },
  dark: false,
  spacingMultiplier: DEFAULT_MULTIPLIERS.spacing,
  borderRadiusMultiplier: DEFAULT_MULTIPLIERS.borderRadius,
};

export function AppRoot({ children }: { children: React.ReactNode }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}
```

Set `dark` for the dark variant and `extraColors` / `fonts` for app-specific colors and
font families. Custom colors are used as given; check their contrast in the app.

## Use the theme in your own components [#use-the-theme-in-your-own-components]

```tsx
import { useAppTheme } from "@ovok/native";

function Badge() {
  const theme = useAppTheme();
  return (
    <View
      style={{
        backgroundColor: theme.colors.green[100],
        padding: theme.spacing(2),
        borderRadius: theme.borderRadius(1),
      }}
    />
  );
}
```

`spacing` and `borderRadius` scale a step by the theme's multipliers, so a whole app
can be made denser or rounder by changing `spacingMultiplier` or
`borderRadiusMultiplier` in one place.

## Components [#components]

- [Theme overview](/native-sdk/guide/components/theme/), with
  [ThemeProvider](/native-sdk/guide/components/theme/theme-provider/),
  [useAppTheme](/native-sdk/guide/components/theme/use-app-theme/),
  [colors](/native-sdk/guide/components/theme/colors/) and
  [multipliers](/native-sdk/guide/components/theme/multipliers/).
- [App shell and providers](/native-sdk/guide/how-to/app-shell) for the provider order.

## API reference [#api-reference]

Every export of `@ovok/native/theme`, with signatures, props and types, is in the [`theme` API reference](/native-sdk/reference/theme).