# Theme Expo native components from a JSON file

You can now customize the look and feel of `@clerk/expo`'s native components (`<AuthView />`, `<UserButton />`, `<UserProfileView />`) on both iOS and Android by pointing the `@clerk/expo` config plugin at a JSON theme file.

filename: app.json
```json
{
  "expo": {
    "plugins": [["@clerk/expo", { "theme": "./clerk-theme.json" }]]
  }
}
```

filename: clerk-theme.json
```json
{
  "colors": {
    "primary": "#6C47FF",
    "background": "#FFFFFF",
    "foreground": "#0F172A",
    "border": "#E2E8F0"
  },
  "darkColors": {
    "primary": "#8B6FFF",
    "background": "#0B0B0F",
    "foreground": "#FFFFFF"
  },
  "design": {
    "borderRadius": 12,
    "fontFamily": "Inter"
  }
}
```

The schema supports:

- **`colors`** — 15 semantic tokens (`primary`, `background`, `input`, `danger`, `success`, `warning`, `foreground`, `mutedForeground`, `primaryForeground`, `inputForeground`, `neutral`, `border`, `ring`, `muted`, `shadow`) as 6- or 8-digit hex strings.
- **`darkColors`** — same shape as `colors`, applied automatically when the device is in dark mode. Set `"userInterfaceStyle": "automatic"` in your `app.json` to let the system switch modes, or pin to `"light"` / `"dark"` to always use one palette.
- **`design.borderRadius`** — number, applied across components on both platforms.
- **`design.fontFamily`** — string, iOS only. The font must be bundled with your iOS app.

The JSON is validated at prebuild — invalid hex colors or value types fail the build with a clear error. iOS embeds the parsed theme in `Info.plist`; Android copies it to `android/app/src/main/assets/clerk_theme.json`. Both are picked up by the native SDKs automatically.

See the [theming reference](https://clerk.com/docs/reference/expo/native-components/theming.md) for the full schema and examples.