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 can be done both from the Themes tab on the InMobi CMP portal and in the code of the 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 dark and light mode colors by leveraging the lightModeColors and darkModeColors respectively In the ChoiceStyle API.
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, lightModeColors: defaultColors, darkModeColors: defaultColors)

ChoiceCmp.shared.startChoice(pcode: "<YOUR-PCODE", delegate: self, gbcDelegate: 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]; 

Color Customization

The following components can be configured:

Through InMobi CMP Portal

1. Login to your InMobi CMP account and navigate to Themes.
2. Under Configure your theme, scroll down and click the "Would you like to customise colours via the portal?" checkbox to enable colour customisation through the portal.
3. Select your preferred theme from Light, Dark, or Auto.
   • Auto: This will apply the Light Theme on the consent screen popup if the user device is in Light Mode, and Dark Theme if the user device is in Dark Mode.
   • Light: This will force the Light Theme on the consent screen popup irrespective of whether the user device is in Light or Dark Mode.
   • Dark: This will force the Dark Theme on the consent screen popup irrespective of whether the user device is in Light or Dark Mode.
4. Light and dark theme colors are set by default. Customize them as per your choice. Click More Options to view advanced color customization options.

   

   Note

   Enter Hex code values for colours while customizing them. For eg. #FF0000 for red.

5. Once done, click Save Theme.

    

   Note

   While color customization can be done through code, InMobi CMP gives priority to color customization enabled through the portal. First, we will consider the customisations from the portal; if there are none, we will consider the customisations made through code. In case there are no changes made through code, we will apply the default colours.

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, the host application must support their integration. For more information, see Adding a Custom Font to Your App

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.

You can leverage boldFont parameter provided in ChoiceStyle to set the font.

let boldFont = ChoiceFont()

boldFont.fontName = "<FONT NAME>"

 let style = ChoiceStyle(preferredThemeMode: .auto, lightModeColors: defaultColors, darkModeColors: defaultColors, boldFont: boldFont)

ChoiceCmp.shared.startChoice(pcode: "YOUR PCODE", delegate: self, gbcDelegate: self, style: style)

Example

//
//  AppDelegate.swift
//  Example
//
//  Copyright © 2024 InMobi. All rights reserved.
// 

import UIKit
import InMobiCMP 

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, ChoiceCmpDelegate, CCPADelegate { 

    func application(_ application: UIApplication,   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
   startChoice()
        return true
    } 

   func startChoice() {
        // Start ChoiceCMP
        let boldFont = ChoiceFont()
        boldFont.fontName = "FONT NAME"
        let style = ChoiceStyle(preferredThemeMode: .auto, lightModeColors: defaultColors, darkModeColors: defaultColors, boldFont: boldFont)
        ChoiceCmp.shared.startChoice(pcode: "YOUR-PCODE", delegate: self, gbcDelegate: self, style: style)
    } 

    var defaultColors : ChoiceColor {
        let choiceColor = ChoiceColor()
        choiceColor.dividerColor = "#CCBBFF"
        choiceColor.tabBackgroundColor = "#BAABEA"
        choiceColor.tabForegroundColor = "#8844FF"
        choiceColor.searchBarBackgroundColor = "#CCBBFF"
        choiceColor.searchBarForegroundColor = "#BAABEA"
        choiceColor.infoButtonForegroundColor = "#8844FF"
        choiceColor.infoScreenBackgroundColor = "#CCBBFF"
        choiceColor.infoScreenForegroundColor = "#5533BB"
        choiceColor.toggleActiveColor = "#8844FF"
        choiceColor.toggleInactiveColor = "#CCBBFF"
        choiceColor.globalTextColor = "#5533BB"
        choiceColor.globalBackgroundColor = "#EEDDFF"
        choiceColor.titleTextColor = "#5533BB"
        choiceColor.bodyTextColor = "#5533BB"
        choiceColor.listTextColor = "#5533BB"
        choiceColor.tabTextColor = "#5533BB"
        choiceColor.menuTextColor = "#5533BB"
        choiceColor.linkTextColor = "#8844FF"
        choiceColor.buttonTextColor = "#BAABEA"
        choiceColor.buttonDisabledTextColor = "#8844FF"
        choiceColor.buttonBackgroundColor = "#8844FF"
        choiceColor.buttonDisabledBackgroundColor = "#CCBBFF"
        return choiceColor
    }
}