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 themeCopy Anchor Link

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.

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 componentsCopy Anchor Link

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.

ComponentsCopy Anchor Link

• Theme overview, with ThemeProvider, useAppTheme, colors and multipliers.
• App shell and providers for the provider order.

API referenceCopy Anchor Link

Every export of @ovok/native/theme, with signatures, props and types, is in the theme API reference.