SDK Customizations

This page explains how to modify styles in the Yuno iOS SDK by changing font, button, and color styles. To customize the iOS SDK appearance, set the appearance fields. This solution allows you to adapt the visual elements of the SDK to match your application brand, improving consistency and the UX.

Appearance configuration

The following table lists all available fields you can use to customize the iOS SDK:

FieldDescription
fontFamilySpecifies the font family used in the SDK. Provide the font file name used in your app, ensuring it matches your application's assets.
accentColorDefines the accent color used in several SDK elements.
buttonBackgroundColorSets the background color for the primary buttons.
buttonTitleColorDetermines the text color for the primary buttons.
buttonBorderColorSpecifies the border color for the primary buttons.
secondaryButtonBackgroundColorSets the background color for the secondary buttons.
secondaryButtonTitleColorDetermines the text color for the secondary buttons.
secondaryButtonBorderColorSpecifies the border color for the secondary buttons.
disableButtonBackgroundColorSets the background color for the disabled-buttons.
disableButtonTitleColorDetermines the text color for the disabled-buttons.
📘

Color Configuration

Ensure all colors are specified as UIColor to maintain compatibility. Colors can be sourced from Xcode's predefined palette or the merchant's assets, but they must always be of type UIColor.

Use the Yuno.Appearance() function to define a variable with all your customizations to control the appearance. Then inform it when initializing the SDK:

let appearance = Yuno.Appearance(
    fontFamily: "Climate Crisis",
    accentColor: UIColor.orange, 
    buttonBackgroundColor: UIColor.yellow, 
    buttonTitleColor: UIColor.black, 
    buttonBorderColor: UIColor.black,
    secondaryButtonBackgroundColor: UIColor.yellow,
    secondaryButtonTitleColor: UIColor.black,
    secondaryButtonBorderColor: UIColor.black,
    disableButtonBackgroundColor: UIColor.gray,
    disableButtonTitleColor: UIColor.black
)

Yuno.initialize(
    apiKey: apiKey,
    config: YunoConfig(appearance: appearance)
)

Usage examples

The following examples show two appearance customizations for the iOS SDK:

let appearance = Yuno.Appearance(
    fontFamily: "Climate Crisis",
    accentColor: UIColor.black, 
    buttonBackgroundColor: UIColor.black, 
    buttonTitleColor: UIColor.white
)

Yuno.initialize(
    apiKey: apiKey,
    config: YunoConfig(appearance: appearance)
)
let appearance = Yuno.Appearance(
    fontFamily: "Climate Crisis",
    accentColor: UIColor.orange, 
    buttonBackgroundColor: UIColor.orange, 
    buttonTitleColor: UIColor.white
)

Yuno.initialize(
    apiKey: apiKey,
    config: YunoConfig(appearance: appearance)
)