Customization for iOS App

Introduction

UI customization capabilities are available with our SDK. This empowers developers to tailor color schemes and font styles of all UI components within the InMobi CMP, ensuring seamless integration with the host application's UI.

Customization for iOS apps is not done through the Themes tab and must be done directly in the code of the SDK. We recommend following these instructions at a later stage, once you have downloaded our SDK.

This section details how to utilize various configuration options for text styles and colors on iOS.

Configuration

You can control light/dark mode by using  preferredThemeMode while calling ChoiceStyle method. It can take three values:

1. LIGHT - choice sdk always behaves in light mode
2. DARK - choice sdk always behaves in dark mode
3. AUTO - choice sdk behaves the same mode as device configured

To customize the UI text styles and colors according to your application, follow these steps:

1. Add Stylesheet Files: Begin by creating the following files to the root directory of your project:
   • LightStyleSheet.json
   • DarkStyleSheet.json
    

   For your convenience, LightStyleSheet.json and DarkStyleSheet.json examples are provided at the end of this document.

2. Update Configuration in Code: Modify the code where the stylesheet is applied to dynamically select between light and dark styles based on the user's interface mode.

Example:

// Start ChoiceCMP 
let style = ChoiceStyle(preferredThemeMode: .auto, lightThemeStyleSheet: "LightStyleSheet", darkThemeStyleSheet: "DarkStyleSheet")
ChoiceCmp.shared.startChoice(pcode: "< YOUR PCODE >", delegate: self, style: style)

ChoiceStyle *style = [[ChoiceStyle alloc] initWithPreferredThemeMode:CMPUserInterfaceStyleAuto lightThemeStyleSheet:@"LightStyleSheet" darkThemeStyleSheet:@"DarkStyleSheet"]; 
[ChoiceCmp.shared startChoiceWithPcode:@"< YOUR PCODE >" delegate:self ccpaDelegate:self shouldDisplayIDFA:true style:style]; 

Note that customization of UI text styles and colors must be performed exclusively using the files 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:

Fonts Customization

There is an option to customize the fonts utilized in the InMobi CMP. By default, the OS default font is applied. To configure custom fonts, it is 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:

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

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 LightStyleSheet.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" 
}

Example/Template DarkStyleSheet.json file:

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