UI customization capabilities are available with our SDK. This enables 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 Unity 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 Unity plugin.
This section details how to utilize various configuration options for text styles and colors on Unity.
You can control light/dark mode by using ThemeMode while calling startChoice
method. It can take three values:
You can pass the ChoiceColor model for setting themes in light and dark mode. If only one model is passed in AUTO themeMode, InMobi CMP SDK will use the same model for both light and dark mode. To create your theme follow the steps:
ChoiceColor
model and set all the necessary colors to that model.ChoiceStyle
object and set the appropriate ChoiceColor
object for light and dark mode resources.ChoiceStyle
object in the startChoice
method.
public void StartChoice()
{
ChoiceCMP.StartChoice(pCode, getChoiceStyle(), true);
}
private ChoiceStyle getChoiceStyle() {
ChoiceStyle choiceStyle = new ChoiceStyle();
choiceStyle.themeMode = ThemeMode.AUTO;
choiceStyle.lightModeColors = getColors();
choiceStyle.darkModeColors = getColors();
return choiceStyle;
}
private ChoiceColor getColors() {
ChoiceColor choiceColor = new 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;
}
The following components can be configured:
Property name | Description |
---|---|
dividerColor |
Color of the dividers between list items and the border color of the description items |
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 |
toggleActiveColor | Toggle button active color |
toggleInactiveColor | Toggle button in-active color |
globalBackgroundColor | Main (or global) background color |
titleTextColor | Title text color |
bodyTextColor | Body text color |
tabTextColor |
Color of the items in the toolbar, such as the title, back button, and menu button |
menuTextColor |
Text color of the menu items (example: menu items in consent and legitimate interest tabs) |
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 |
Property name | Description |
---|---|
dividerColor | Page divider color |
tabBackgroundColor | Tab background color (for example, the vendor tabs) |
tabForegroundColor | Tab foreground color (for example, 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 |
If you wish to customize the fonts used in the Choice CMP, follow the instructions below:
ChoiceStyle
object as a param.
ChoiceStyle choiceStyle = new ChoiceStyle();
choiceStyle.themeMode = ThemeMode.AUTO;
choiceStyle.lightModeColors = getColors();
choiceStyle.darkModeColors = getColors();
choiceStyle.boldFont = "Luckiest Guy";
choiceStyle.regularFont = "Luckiest Guy";
return choiceStyle;
To attach the font files to the project, follow the steps below:
If you are facing any issue like "You have not accepted the license agreements of the following SDK components”, then follow the steps below:
To avoid any confusions, keep the font filename same as the font itself for e.g if your font is CustomFont-Light
, then keep the filename as CustomFont-Light.ttf
By installing this SDK update, you agree that your Children Privacy Compliance setting remains accurate or that you will update that setting, whenever there is a change in your app's audience. You may update the app's Children Privacy Compliance settings at https://publisher.inmobi.com/my-inventory/app-and-placements.