UI Customization for Mobile iOS


UI Customization in Recent Release

We have UI customization capabilities with our Choice mobile SDK. This empowers developers to tailor color schemes and font styles of all UI components within the Choice Mobile CMP, ensuring seamless integration with the host application's UI.

This section guides leveraging various configuration options for text styles and colors.


Begin by adding the file ChoiceStyleSheet.json to your project. Place it in the root directory of your application project (e.g., sampleCmpApp/ChoiceStyleSheet.json). For your convenience, a template ChoiceStyleSheet.json is provided at the end of this document.

Note that customization of UI text styles and colors must be performed exclusively through the ChoiceStyleSheet.json file and cannot be configured within the Choice portal.

Color Customization

Within your project’s ChoiceStyleSheet.json file you define the color as follows. The format is “color name”:”color hex value”, example: “dividerColor”:”#ff0000” .

The following components can be configured:

Property name Description
dividerColor Page divider color
tabBackgroundColor Tab background color (for examples the vendor tabs)
tabForegroundColor Tab foreground color (for examples the vendor tabs)
searchBarBackgroundColor Search field background color
searchBarForegroundColor Search field foreground color
infoButtonForegroundColor Information (i) button foreground color
infoScreenBackgroundColor Information screen background color
infoScreenForegroundColor Information screen foreground color
toggleActiveColor Toggle button active color
toggleInactiveColor Toggle button in-active color
globalTextColor Main (global) text color
globalBackgroundColor Main (or global) background color
titleTextColor Title text color
bodyTextColor Body text color
listTextColor Color of the text in the lists (like vendor list)
tabTextColor Tab text color (for example the vendor tabs)
menuTextColor Menu text color (example: ???)
linkTextColor Link text color (hyperlinks and links between the different pages)
buttonTextColorButton text color Button text color
buttonDisabledTextColor Button text color in disabled state
buttonBackgroundColor Button background color
buttonDisabledBackgroundColor Button background color in disabled state

Fonts Customization

You have the option to customize the fonts utilized in the Choice CMP. By default, the OS default font is applied. To configure custom fonts, it's essential that the host application supports their integration. For more information, see Adding a Custom Font to Your App.

Following the setup, you can include the font names in the same ChoiceStyleSheet.json file using the following keys::

Property name Description
regularFont Name of the font used for the CMP
boldFont Name of the bold font used for the CMP

To find the correct names for utilizing custom fonts in your source code, please refer to the dedicated section: Use Your Custom Font in Source Code.

Example/Template ChoiceStyleSheet.json file:

    "regularFont": "OpenSans",
    "boldFont": "LuckiestGuy-Regular",
    "dividerColor": "#C6C6C8",
    "tabBackgroundColor": "#CCBBFF",
    "tabForegroundColor": "#8E8E93",
    "tabTextColor": "#000000",
    "searchBarBackgroundColor": "#CCBBFF",
    "searchBarForegroundColor": "#000000",
    "infoButtonForegroundColor": "#007AFF",
    "infoScreenBackgroundColor": "#FFFFFF",
    "infoScreenForegroundColor": "#000000",
    "toggleActiveColor": "#34C759",
    "toggleInactiveColor": "#AEAEB2",
    "globalBackgroundColor": "FFFFFF",
    "globalTextColor": "#000000",
    "titleTextColor": "#000000",
    "bodyTextColor": "#000000",
    "listTextColor": "#000000",
    "menuTextColor": "#000000",
    "linkTextColor": "#007AFF",
    "buttonTextColor": "#FFFFFF",
    "buttonDisabledTextColor": "#8E8E93",
    "buttonBackgroundColor": "#007AFF",
    "buttonDisabledBackgroundColor": "#D1D1D6"

On This Page

Last Updated on: 30 Nov, 2023