Custom tokens

Override any token in native-mate.json without touching component source. Changes apply instantly on hot reload.

Override colours

native-mate.json

{
  "preset": "zinc",
  "componentsDir": "components/ui",
  "tokens": {
    "colors": {
      "primary": "#6366f1",
      "primaryForeground": "#ffffff",
      "destructive": "#dc2626"
    }
  }
}

Override spacing and radius

json

{
  "preset": "zinc",
  "componentsDir": "components/ui",
  "tokens": {
    "spacing": { "lg": 20, "xl": 28 },
    "radius": { "md": 6, "lg": 12 }
  }
}

Programmatic overrides

Pass overrides directly to ThemeProvider for runtime switching (e.g. white-label brands):

tsx

import { ThemeProvider } from '@native-mate/core'

const BRAND_TOKENS = {
  colors: {
    primary: '#0f766e',
    primaryForeground: '#ffffff',
  },
}

export function App() {
  return (
    <ThemeProvider preset="zinc" overrides={BRAND_TOKENS}>
      <RootNavigator />
    </ThemeProvider>
  )
}

Available colour tokens

Token	Purpose
background	Screen/page background
surface	Card, input, sheet background
surfaceRaised	Elevated card, popover background
border	Dividers, input borders
foreground	Primary text
mutedForeground	Secondary text, placeholders
primary	Brand/action colour (buttons, links)
primaryForeground	Text on primary background
destructive	Errors, delete actions
destructiveForeground	Text on destructive background
success	Success states
successForeground	Text on success background
warning	Warning states
warningForeground	Text on warning background
muted	Muted/disabled fill
overlay	Modal backdrop scrim
ring	Focus ring colour