Skip to main content

Theme Expo native components from a JSON file

Category
SDK
Published

@clerk/expo now supports a JSON-based theme for native iOS and Android components — colors, dark mode, border radius, and font family.

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.

app.json
{
  "expo": {
    "plugins": [["@clerk/expo", { "theme": "./clerk-theme.json" }]]
  }
}
clerk-theme.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 for the full schema and examples.

Contributor
Chris Canin

Share this article