# useAppTheme

Canonical page: https://docs.ovok.com/native-sdk/guide/components/theme/use-app-theme

`useAppTheme` is a typed wrapper around React Native Paper's `useTheme`:

```tsx
const theme = useAppTheme();

return (
  <View
    style={{
      backgroundColor: theme.colors.surface,
      padding: theme.spacing(4),
      borderRadius: theme.borderRadius(2),
    }}
  />
);
```

## Returned values [#returned-values]

The returned `AppTheme` includes the Paper MD3 theme, extended colors,
`spacing(value)`, `borderRadius(value)`, `roundness`, and `dark`. Both helper
functions multiply the supplied number by the corresponding value passed to
`ThemeProvider`; they do not round or clamp the argument.

Call the hook below `ThemeProvider` to receive the SDK-generated helpers. Outside
that provider, React Native Paper returns its default theme, which does not provide
the SDK's `spacing`, `borderRadius`, or extended custom colors; calling those missing
helpers can crash. Mount the SDK theme provider or use `useOvokUi`, which supplies
fallback helper functions.

## Color contrast [#color-contrast]

The SDK exposes semantic colors such as `success`, `error`, and `warning`, but it
does not calculate contrast or automatically choose an `on*` color for custom
overrides. Test text and control contrast in both light and dark configurations,
especially if replacing `primary`, `error`, or palette shades.