# @ovok/native/theme

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

Theme provider, theme hook, colors and spacing multipliers.

Import from `@ovok/native/theme`.

## Components [#components]

### ThemeProvider() [#themeprovider]

```ts
function ThemeProvider(__namedParameters): Element | null;
```

Provides the theme, loads the DM Sans fonts and renders nothing until they are ready.

#### Parameters [#parameters]

| Parameter | Type |
| ------ | ------ |
| `__namedParameters` | [`ThemeProviderProps`](#themeproviderprops) |

#### Returns [#returns]

`Element` \| `null`

## Hooks [#hooks]

### useAppTheme() [#useapptheme]

```ts
function useAppTheme(): object;
```

Returns the current `AppTheme`.

#### Returns [#returns-1]

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `borderRadius()` | (`value`) => `number` | - | Scales a border radius step to pixels. |
| `borderRadiusScale` | `Record`\<`string`, `number`\> \| `undefined` | - | Border radius lookup table, when the theme uses one. |
| `colors` | `object` | - | Material 3 colors merged with the app palette and extra colors. |
| `colors.blue` | `IndexedColor` | - | Blue scale. |
| `colors.cyan` | `IndexedColor` | - | Cyan scale. |
| `colors.error` | `string` | - | Color for error states. |
| `colors.gray` | `IndexedColor` | - | Neutral gray scale. |
| `colors.green` | `IndexedColor` | - | Green scale. |
| `colors.orange` | `IndexedColor` | - | Orange scale. |
| `colors.pink` | `IndexedColor` | - | Pink scale. |
| `colors.purple` | `IndexedColor` | - | Purple scale. |
| `colors.red` | `IndexedColor` | - | Red scale. |
| `colors.success` | `string` | - | Color for success states. |
| `colors.warning` | `string` | - | Color for warning states. |
| `colors.yellow` | `IndexedColor` | - | Yellow scale. |
| `dark` | `boolean` | `theme.dark` | Whether the dark variant is used. |
| `fonts` | `MD3Typescale` | - | Material 3 fonts with the app's font families applied. |
| `roundness` | `number` | - | Base corner roundness taken from the border radius multiplier. |
| `spacing()` | (`value`) => `number` | - | Scales a spacing step to pixels. |
| `spacingScale` | `Record`\<`string`, `number`\> \| `undefined` | - | Spacing lookup table, when the theme uses one. |

## Interfaces [#interfaces]

### ThemeFonts [#themefonts]

Font families used by the theme.

#### Properties [#properties]

| Property | Type | Description |
| ------ | ------ | ------ |
| <a id="property-body"></a> `body?` | `string` | Font family for body text. |
| <a id="property-display"></a> `display?` | `string` | Font family for headings. |
| <a id="property-mono"></a> `mono?` | `string` | Monospace font family. |

***

### ThemeProviderProps [#themeproviderprops]

Props for `ThemeProvider`.

#### Properties [#properties-1]

| Property | Type | Description |
| ------ | ------ | ------ |
| <a id="property-children"></a> `children` | `ReactNode` | App content that receives the theme. |
| <a id="property-theme"></a> `theme` | `object` | Theme configuration. |
| `theme.borderRadiusMultiplier` | [`ThemeScale`](#themescale) | Multiplier applied to border radius values. |
| `theme.colors` | `Partial`\<`MD3Colors`\> & `object` | Color palette, merged over the Material 3 colors. |
| `theme.dark` | `boolean` | Whether the dark variant is used. |
| `theme.extraColors?` | `Record`\<`string`, `string`\> | Additional named colors available on the theme. |
| `theme.fonts?` | [`ThemeFonts`](#themefonts) | Font families. |
| `theme.spacingMultiplier` | [`ThemeScale`](#themescale) | Multiplier applied to spacing values. |

## Type Aliases [#type-aliases]

### AppTheme [#apptheme]

```ts
type AppTheme = ReturnType<typeof generateTheme>;
```

The generated theme: Material 3 theme plus Ovok colors, fonts, `spacing` and `borderRadius` helpers.

***

### ThemeScale [#themescale]

```ts
type ThemeScale = number | Record<string, number>;
```

A single multiplier, or a map of named multipliers.

## Variables [#variables]

### DEFAULT\_COLORS [#default_colors]

```ts
const DEFAULT_COLORS: Colors;
```

Default Ovok color palette used when the theme does not override colors.

***

### DEFAULT\_MULTIPLIERS [#default_multipliers]

```ts
const DEFAULT_MULTIPLIERS: object;
```

Default spacing and border radius multipliers used when the theme does not set its own.

#### Type Declaration [#type-declaration]

| Name | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| <a id="property-borderradius"></a> `borderRadius` | `4` | `4` | Pixels per border radius step. |
| <a id="property-spacing"></a> `spacing` | `4` | `4` | Pixels per spacing step. |