@ovok/native/theme
Theme provider, theme hook, colors and spacing multipliers.
- Stable unknown
- Release candidate since 1.16.1-rc.3
- Development since 1.16.1-dev.2111+9796905
Theme provider, theme hook, colors and spacing multipliers.
Import from @ovok/native/theme.
Components
ThemeProvider()
function ThemeProvider(__namedParameters): Element | null;Provides the theme, loads the DM Sans fonts and renders nothing until they are ready.
Parameters
| Parameter | Type |
|---|---|
__namedParameters | ThemeProviderProps |
Returns
Element | null
Hooks
useAppTheme()
function useAppTheme(): object;Returns the current AppTheme.
Returns
| 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
ThemeFonts
Font families used by the theme.
Properties
| Property | Type | Description |
|---|---|---|
body? | string | Font family for body text. |
display? | string | Font family for headings. |
mono? | string | Monospace font family. |
ThemeProviderProps
Props for ThemeProvider.
Properties
| Property | Type | Description |
|---|---|---|
children | ReactNode | App content that receives the theme. |
theme | object | Theme configuration. |
theme.borderRadiusMultiplier | 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 | Font families. |
theme.spacingMultiplier | ThemeScale | Multiplier applied to spacing values. |
Type Aliases
AppTheme
type AppTheme = ReturnType<typeof generateTheme>;The generated theme: Material 3 theme plus Ovok colors, fonts, spacing and borderRadius helpers.
ThemeScale
type ThemeScale = number | Record<string, number>;A single multiplier, or a map of named multipliers.
Variables
DEFAULT_COLORS
const DEFAULT_COLORS: Colors;Default Ovok color palette used when the theme does not override colors.
DEFAULT_MULTIPLIERS
const DEFAULT_MULTIPLIERS: object;Default spacing and border radius multipliers used when the theme does not set its own.
Type Declaration
Last updated on