IncdOnboarding SDK Customization guide v2

Customization for ID Capture v2

You can customize the appearance of the SDK by setting colors and fonts. This can be done in two ways: through a JSON configuration file or using code.

Customization Through JSON

You can define appearance settings in a JSON file and load it during initialization:

Note: If you are already using themes loaded from JSON, you should extend the existing JSON file with the new structure described here.

Example JSON File

{
  "colorPalette": {
    "neutral": "#FFFFFF",
    "black": "#000000",
    "brand50": "#E5FFF0",
    "brand200": "#99FFC3",
    "brand300": "#66FFA6",
    "brand400": "#33FF88",
    "brand500": "#00FF6A",
    "brand600": "#00CC55",
    "brand900": "#213B27",
    "gray50": "#FCFDFC",
    "gray100": "#EBEFEC",
    "gray200": "#C6D2C8",
    "gray300": "#A3B8A8",
    "gray500": "#607C66",
    "gray700": "#3A4B3E",
    "gray800": "#263128",
    "gray900": "#141A15",
    "brandSecondary50": "#F2FEE2",
    "brandSecondary500": "#82D10A",
    "negative50": "#FFF0F0",
    "negative500": "#FF5F5A",
    "negative600": "#E71111",
    "negative950": "#240100",
    "warning50": "#FFEBF7",
    "warning400": "#FF47B6",
    "warning500": "#FF0099",
    "warning950": "#520031",
    "positive50": "#E4F0FB",
    "positive600": "#18609F",
    "positive800": "#0C3050"
  },
  "typography": {
    "family": {
      "text": {
        "ios": {
          "regular": "Helvetica",
          "medium": "Helvetica-Medium",
          "bold": "Helvetica-Bold"
        },
        "android": {
          "regular": "some font"
        }
      },
      "display": {
        "ios": {
          "extraBold": "Helvetica-Black"
        },
        "android": {
          "extraBold": "some font"
        }
      },
    },
    "letterSpacing": {
      "none": 0,
      "medium": -0.5,
      "large": -1.0,
      "extraLarge": -1.5
    }
  }
}

Loading the JSON File

if let path = Bundle.main.path(forResource: "AppearanceConfig", ofType: "json"),
   let string = try? String(contentsOfFile: path, encoding: .utf8) {
    IncdTheme.loadJsonTheme(string)
}

Customization Through Code

Use the API in code to set colors and fonts programmatically:

Setting Colors

IncdTheme.colorPalette = .init(
    neutral: UIColor.white,
    black: UIColor.black,
    brand50: UIColor.red,
    // ...
)

Setting Fonts

IncdTheme.typography = .init(
    family: .init(
        text: .init(regular: "Helvetica", medium: "Helvetica-Medium", bold: "Helvetica-Bold"),
        display: .init(extraBold: "Helvetica-ExtraBold")
    ),
    letterSpacing: .init(
        none: 0,
        medium: -0.5,
        large: -1.0,
        extraLarge: -1.5
    )
)

About Colors

The color scheme is based on the palette, which consists of colors that can be overridden:

  • neutral

  • black

  • brand50

  • brand200

  • brand300

  • brand400

  • brand500

  • brand600

  • brand900

  • gray50

  • gray100

  • gray200

  • gray300

  • gray500

  • gray700

  • gray800

  • gray900

  • brandSecondary50

  • brandSecondary500

  • negative50

  • negative500

  • negative600

  • negative950

  • warning50

  • warning400

  • warning500

  • warning950

  • positive50

  • positive600

  • positive800

Color Format

In the JSON configuration file, colors should be specified in hex with the format #RRGGBB or #AARRGGBB.

About Fonts

The typography system is based on font families, which can include the following optional styles:

  • regular
  • medium
  • bold
  • extraBold

Text Fonts

For text, the following styles are currently used:

  • regular
  • medium
  • bold

Display Fonts

For display, the following style is used:

  • extraBold

By default, these styles can be set using the Family structure in the JSON configuration file or programmatically in the code.