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.
Updated 22 days ago