> For clean Markdown of any page, append .md to the page URL. > For a complete documentation index, see https://docs.withpersona.com/2020-05-18/react-native-sdk-v2-theming/llms.txt. > For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.withpersona.com/_mcp/server. # React Native Legacy Client Side Theming > Configure legacy client-side themes for the Persona React Native SDK. ## Theming The Persona React Native SDK relies on theming capabilities provided by underlying native platforms to ensure that themes run smoothly and have no negative impact on the overall performance and user experience. > **Info** > > #### Platform differences > > Because Android and iOS look and feel different, there are discrepancies to consider when theming each platform. We recommend tackling theming on each platform separately. ## Using the built-in CLI tool Prior to Persona React Native SDK v2.9.2, the SDK shipped with a built-in CLI tool, `persona-tool`, that helped you work with the native theming capabilities supported on Android and iOS. The tool was removed in v2.9.2 and is no longer available; legacy client-side theming is configured directly under the `persona` key in your app's `package.json`. ### Configure theming directly Add a `persona` key with the native theming configuration to your Application's `package.json`. As of `2021-07-20` it looks something like this: **`json`** ```json json "persona": { "androidTheme": { "backgroundColor": null, "primaryColor": null, "darkPrimaryColor": null, "accentColor": null, "titleTextColor": null, "titleTextFont": null, "bodyTextColor": null, "bodyTextFont": null, "footnoteTextColor": null, "footnoteTextFont": null, "textFieldTextColor": null, "textFieldTextFont": null, "pickerTextColor": null, "pickerTextFont": null, "buttonBackgroundColor": null, "buttonDisabledBackgroundColor": null, "buttonTouchedBackgroundColor": null, "buttonTextColor": null, "buttonDisabledTextColor": null, "buttonCornerRadius": null, "buttonFont": null, "progressColor": null, "loadingAnimationAsset": null, "loadingAnimationWidthPercent": null, "selfieAnimationAsset": null, "selfieAnimationWidthPercent": null }, "iosTheme": { "backgroundColor": null, "primaryColor": null, "darkPrimaryColor": null, "accentColor": null, "overlayBackgroundColor": null, "titleTextColor": null, "titleTextFont": null, "bodyTextColor": null, "bodyTextFont": null, "footnoteTextColor": null, "footnoteTextFont": null, "formLabelTextColor": null, "formLabelTextFont": null, "textFieldTextColor": null, "textFieldBackgroundColor": null, "textFieldBorderColor": null, "pickerTextColor": null, "pickerTextFont": null, "buttonBackgroundColor": null, "buttonDisabledBackgroundColor": null, "buttonTouchedBackgroundColor": null, "buttonImageTintColor": null, "buttonImageHidden": null, "buttonTextColor": null, "buttonDisabledTextColor": null, "buttonTextAlignment": null, "buttonCornerRadius": null, "buttonFont": null, "selectedCellBackgroundColor": null, "closeButtonTintColor": null, "cancelButtonBackgroundColor": null, "progressColor": null, "cameraGuideCornersColor": null, "cameraButtonBackgroundColor": null, "cameraInstructionsTextColor": null, "cameraInstructionsTextFont": null, "loadingAnimationAssetName": null, "loadingAnimationAssetWidth": null, "loadingAnimationAssetHeight": null, "processingAnimationAssetName": null, "processingAnimationAssetWidth": null, "processingAnimationAssetHeight": null, "selfieAnimationAssetName": null, "selfieAnimationAssetWidth": null, "selfieAnimationAssetHeight": null } } ``` **Colors** Optionally modify the color values to valid hexadecimal color codes. Examples: #0000FF, 4700EB. **Fonts** Optionally modify the font values to font names that are either built-in to the platform or have been built into your application. Examples: `sans-serif` (Android), `San Francisco` (iOS), `@font/customira` (Android custom). For the smoothest installation and overall experience, we recommend sticking with system defaults, but if font change is desired, view additional information in [Customizing Fonts on iOS](#customizing-fonts-on-ios) and [Customizing Fonts on Android](#customizing-fonts-on-android). ### Callouts for Android * The `pickerTextColor` and `pickerTextFont` theme keys style Android's `Spinner` components. ### What to theme first To get started with theming, we recommend starting with the main colors: `backgroundColor`, `primaryColor`, `darkPrimaryColor`, and `accentColor`, and the `textColors`. After these match your brand's colors, you can tweak individual elements as desired. ### What to theme next on Android After theming the core colors, you can theme text fields, picker (spinner)s, and buttons. Text fields and pickers may not show up within your template, so they may be irrelevant for your integration. Text fields and pickers should look similar since they are form controls. ### What to theme next on iOS iOS has an additional `overlayBackgroundColor` that determines the background color of the Toast element that pops up if an individual decides to cancel. This option is not available on Android as the component does not exist. After theming the core colors, you can theme text fields, pickers, and buttons. Text fields and pickers may not show up within your template, so they may be irrelevant for your integration. Text fields and pickers should look similar since they are form controls. `selectedCellBackgroundColor` determines the color of the cells in the country picker (may not exist in your template) `closeButtonTintColor` determines the color of the "x" to close the Inquiry flow should an individual choose not to complete. This close button opens the cancel toast element. `cancelButtonBackgroundColor` determines the color of the cancel button within the cancel toast element. ### Customizing Fonts on Android In order to specify fonts on Android, the fonts either must be system fonts or fonts bundled into your application. For a list of system fonts available out of the box, view: [https://github.com/react-native-training/react-native-fonts#android](https://github.com/react-native-training/react-native-fonts#android). As an example, If you want to use `sans-serif-medium` on Android, then set`persona.androidTheme.titleTextFont`: **`json`** ```json json "persona": { "androidTheme": { "titleTextFont": "sans-serif-medium" } } ``` #### Providing a custom font If you would like to provide your own custom font, first create a font resource by following the follow guide: [https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml](https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml). **`json`** ```json json "persona": { "androidTheme": { "titleTextFont": "@font/custom-font" } } ``` ### Customizing Fonts on iOS In order to specify fonts on iOS, the fonts must be either system fonts or fonts bundled into your application. For a list of system fonts available out of the box, view: [https://github.com/react-native-training/react-native-fonts#ios](https://github.com/react-native-training/react-native-fonts#ios) #### Providing a custom font If you would like to provide your own custom font, add a font file to the Xcode project by following the guide here: [https://developer.apple.com/documentation/uikit/text\_display\_and\_fonts/adding\_a\_custom\_font\_to\_your\_app](https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app). Then, you can specify your custom font. **`json`** ```json json "persona": { "iosTheme": { "titleTextFont": "CustomFont-light" } } ``` > Configure legacy client-side themes for the Persona React Native SDK.