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.
{
"expo": {
"plugins": [["@clerk/expo", { "theme": "./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 ascolors, applied automatically when the device is in dark mode. Set"userInterfaceStyle": "automatic"in yourapp.jsonto 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.