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
{
"displayMode": "system",
"colorPalette": {
"neutralLight": "#FFFFFF",
"neutralDark": "#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 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.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
)
)
Setting Display Mode
IncdTheme.displayMode = .system // or .light, .dark
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
-
gray0
-
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.
About Display Mode
The display mode controls whether the SDK uses light or dark UI appearance. It works in conjunction with your color palette to provide appropriate theming.
Available Options:
.light
(default) - Forces light appearance regardless of system settings.dark
- Forces dark appearance regardless of system settings.system
- Automatically adapts to the device's system appearance setting
Updated 7 days ago