Skip to main content

IncdTheme guide

IncdTheme enables you to change existing default theme or create a new one from scratch.

Available customizations:

  • Colors
  • Fonts
  • Buttons
  • Labels
  • Custom UI Components (such as Camera Feedback View)

Customization mapping can be found here. Assets and Strings mapping can be found here. Check IncdTheme structure tree inside Xcode for full list of customization. Check ThemeBuilder.swift for a concrete example on how to build a full custom theme.

Usage

Change existing properties of theme

// 1. Copy current theme
var customTheme = IncdTheme.current

// 2. Edit
customTheme.colors.accent = someAccentUIColor
customTheme.fonts.title = someUIFont
customTheme.labels.title.textColor = someTitleUIColor
customTheme.buttons.primary.states.normal.borderColor = someBorderUIColor
customTheme.buttons.primary.medium.contentInsets = someUIEdgeInsets
// etc.

// 3. Apply edited theme
IncdTheme.current = customTheme

// 4. Apply customization via JSON
let jsonTheme: String // a JSON string with theme configuration check `Omni/Resources/IncdTheme.json` for a full example.
IncdTheme.loadJsonTheme(jsonTheme)

Create a new theme

  // 1. Build Theme
let coolTheme = buildCustomTheme()
// 2. Apply edited theme
IncdTheme.current = coolTheme

...

func buildCustomTheme() -> ThemeConfiguration {

let colorsConfig = ColorsConfiguration(accent: Colors.accent,
primary: Colors.primary,
background: Colors.background,
secondaryBackground: Colors.secondaryBackground,
success: Colors.success,
error: Colors.error,
warning: Colors.warning,
cancel: Colors.cancel)

let fontsConfig = FontsConfiguration(title: Fonts.title,
hugeTitle: Fonts.hugeTitle,
subtitle: Fonts.subtitle,
boldedSubtitle: Fonts.boldedSubtitle,
smallSubtitle: Fonts.smallSubtitle,
info: Fonts.info,
body: Fonts.body,
boldedBody: Fonts.boldedBody,
buttonBig: Fonts.buttonBig,
buttonMedium: Fonts.buttonMedium,
textFieldBig: Fonts.textFieldBig,
textFieldMedium: Fonts.textFieldMedium)

let buttonsConfig = ButtonsConfiguration(primary: primaryButton,
secondary: secondaryButton,
text: textButton,
help: helpButton)

let labelsConfig = LabelsConfiguration(title: titleLabelConfig,
secondaryTitle: secondaryTitleLabelConfig,
subtitle: subtitleLabelConfig,
secondarySubtitle: secondarySubtitleLabelConfig,
smallSubtitle: smallSubtitleLabelConfig,
info: infoLabelConfig,
secondaryInfo: secondaryInfoLabelConfig,
body: bodyLabelConfig,
secondaryBody: secondaryBodyLabelConfig,
code: codeLabelConfig)

let customComponents = CustomComponents(cameraFeedback: cameraFeedbackConfig,
idCaptureHelp: idCaptureHelp,
idSideLabel: idSideLabel,
separator: separatorConfig)

return ThemeConfiguration(colors: colorsConfig,
fonts: fontsConfig,
buttons: buttonsConfig,
labels: labelsConfig,
customComponents: customComponents)
}

// MARK: - Buttons

private var primaryButton: ButtonConfiguration {
let normal = ButtonThemedState(backgroundColor: Colors.accent,
cornerRadius: 6,
shadowColor: UIColor.black.cgColor,
shadowOffset: CGSize(width: 0, height: 5),
shadowOpacity: 0.15,
shadowRadius: 9,
textColor: .white)
var highlighted = normal
highlighted.backgroundColor = Colors.primary
highlighted.textColor = Colors.accent
highlighted.transform = .init(scaleX: 0.93, y: 0.93)
highlighted.cornerRadius = 12
var disabled = normal
disabled.backgroundColor = .incdDisabled
disabled.textColor = .white

let big = ButtonSizeVariant(minWidth: UIScreen.main.bounds.width-32.0,
contentInsets: Insets.bigInsets)

let medium = ButtonSizeVariant(height: 32.0,
minWidth: (UIScreen.main.bounds.width-Margins.tutorialID)/2,
contentInsets: Insets.mediumInsets)

return ButtonConfiguration(states: .init(normal: normal, highlighted: highlighted, disabled: disabled),
big: big,
medium: medium)
}

...

private var helpButton: HelpButtonConfiguration {

return HelpButtonConfiguration(cornerRadius: 35,
backgroundColor: Colors.background,
textColor: Colors.primary,
iconColor: Colors.primary,
width: 140,
height: 70,
iconTitlePadding: 4,
verticalPadding: 6,
horizontalPadding: 8)
}

...


// MARK: - Labels

private var titleLabelConfig: LabelConfiguration {
LabelConfiguration(textColor: Colors.primaryText)
}

...

// MARK: - Camera Feedback

private var cameraFeedbackConfig: CameraFeedbackConfiguration {
CameraFeedbackConfiguration(alpha: 0.75,
backgroundColor: Colors.secondaryBackground,
cornerRadius: 6,
textBackgroundColor: .black.withAlphaComponent(0.3),
textColor: Colors.secondaryText)
}

private var idCaptureHelp: IDCaptureHelpConfiguration {
IDCaptureHelpConfiguration(commonIssueLayoutOrientation: .horizontal)
}

private var idSideLabel: IDSideLabelConfiguration {
IDSideLabelConfiguration(alpha: 0.8, backgroundColor: Colors.secondaryBackground, borderColor: Colors.accent, borderWidth: 1.0, cornerRadius: 16)
}

private var separatorConfig: SeparatorConfiguration {
SeparatorConfiguration(alpha: CGFloat = 0.0,
color: UIColor = .incdSecondaryBackground,
cornerRadius: CGFloat = 0.5,
padding: CGFloat = 16,
thickness: CGFloat = 1)
}

...

// Where:

private struct Insets {
static var bigInsets = some UIEdgeInsets
...
}

private struct Margins {
static var tutorialID = some CGFloat
...
}

private struct Colors {
static var accent = some UIColor
...
}

private struct Fonts {
static var title = some UIFont
...
}