Customisation 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

{
  "colorScheme": {
    "brand": "#FFFF006A",
    "surfaceNeutralLight": "#FFFFFFFF",
    "surfaceNeutralDark": "#FF000000",
    "surfacePrimary50": "#FFFFE5F0",
    "surfacePrimary400": "#FFFF3388",
    "surfacePrimary500": "#FFFF006A",
    "surfacePrimary600": "#FFCC0055",
    "surfaceSecondary0": "#FFFFFFFF",
    "surfaceSecondary50": "#FFFDFCFC",
    "surfaceSecondary100": "#FFEFEBEC",
    "surfaceSecondary200": "#FFD2C6C8",
    "surfaceSecondary300": "#FFB8A3A8",
    "surfaceSecondary500": "#FF7C6066",
    "surfaceSecondary700": "#FF4B3A3E",
    "surfaceSecondary800": "#FF312628",
    "surfaceSecondary900": "#FF1A1415",
    "surfaceStatusSoftNegative": "#FFF0FFF0",
    "surfaceStatusSoftWarning": "#FFEBFFF7",
    "surfaceStatusSoftPositive": "#FFF0E4FB",
    "surfaceStatusNegative": "#FF11E711",
    "surfaceStatusWarning": "#FF00FF99",
    "surfaceStatusPositive": "#FF60189F",
    "iconPrimary": "#FF7C6066",
    "iconSecondary": "#FF312628",
    "iconAccent": "#FFFF006A",
    "iconNegative": "#FF11E711",
    "iconWarning": "#FF00FF99",
    "iconPositive": "#FF60189F",
    "borderPrimary": "#FFEFEBEC",
    "borderDisabled": "#FFB8A3A8",
    "borderFocus": "#FF7C6066",
    "borderAccent": "#FFFF006A",
    "borderNegative": "#FF11E711",
    "borderWarning": "#FF00FF99",
    "borderPositive": "#FF60189F",
    "textBodyPrimary": "#FF312628",
    "textBodySecondary": "#FF7C6066",
    "textBodyTertiary": "#FFB8A3A8",
    "textBodyInvert": "#FFFFFFFF",
    "textBrandAccent": "#FFFF006A",
    "textBrandSpecial": "#FFD1820A",
    "textStatusNegative": "#FF11E711",
    "textStatusWarning": "#FF00FF99",
    "textStatusPositive": "#FF60189F"
  },
  "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 data = try? Data(contentsOf: URL(fileURLWithPath: path)) {
    IncdTheme.loadJsonTheme(data: data)
}

Customization Through Code

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

Setting Colors

IncdTheme.colorScheme = .init(
    brand: UIColor.red,
    surfaceNeutralLight: UIColor.blue
    // ...
)

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 following base colors:

• brand
• surfaceNeutralLight
• surfaceNeutralDark
• surfacePrimary50
• surfacePrimary400
• surfacePrimary500
• surfacePrimary600
• surfaceSecondary0
• surfaceSecondary50
• surfaceSecondary100
• surfaceSecondary200
• surfaceSecondary300
• surfaceSecondary500
• surfaceSecondary700
• surfaceSecondary800
• surfaceSecondary900
• surfaceStatusSoftNegative
• surfaceStatusSoftWarning
• surfaceStatusSoftPositive
• surfaceStatusNegative
• surfaceStatusWarning
• surfaceStatusPositive
• iconPrimary
• iconSecondary
• iconAccent
• iconNegative
• iconWarning
• iconPositive
• borderPrimary
• borderDisabled
• borderFocus
• borderAccent
• borderNegative
• borderWarning
• borderPositive
• textBodyPrimary
• textBodySecondary
• textBodyTertiary
• textBodyInvert
• textBrandAccent
• textBrandSpecial
• textStatusNegative
• textStatusWarning
• textStatusPositive

These base colors are essential for defining the overall appearance of the SDK.

In addition to base colors, there are derived colors that allow for more detailed customization. Derived colors include:

• buttonPrimarySurfaceDefault
• buttonPrimarySurfaceHover
• buttonPrimarySurfacePressed
• buttonPrimarySurfaceDisabled
• buttonPrimaryTextDefault
• buttonPrimaryTextDisabled
• buttonPrimaryText
• buttonSecondarySurfaceDefault
• buttonSecondarySurfaceHover
• buttonSecondarySurfacePressed
• buttonSecondarySurfaceDisabled
• buttonSecondaryTextDefault
• buttonSecondaryTextDisabled
• buttonSecondaryBorderDefault
• buttonSecondaryBorderHover
• buttonSecondaryBorderPressed
• buttonSecondaryBorderDisabled
• linkTextDefault
• linkTextHover
• linkTextVisited
• checkboxSurfaceDefault
• checkboxSurfaceSelect
• checkboxSurfaceDisabled
• checkboxBorderDefault
• checkboxBorderSelect
• checkboxBorderDisabled
• checkboxBorderError
• checkboxTextDefault
• checkboxTextDisabled
• checkboxTextNegative
• checkboxIconDefault
• inputSurfaceDefault
• inputSurfaceActive
• inputSurfaceDisabled
• inputSurfaceNegative
• inputBorderDefault
• inputBorderActive
• inputBorderDisabled
• inputBorderNegative
• inputTextLabelDefault
• inputTextLabelDisabled
• inputTextFieldDefault
• inputTextFieldDisabled
• inputTextFieldPlaceholder
• inputTextHelperDefault
• inputTextHelperDisabled
• inputTextHelperNegative
• inputIconPositive
• inputIconWarning
• inputIconNegative
• inputIconDefault

By default, derived colors are automatically generated from the base colors. However, you can explicitly define them for more granular control.

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.