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 = CustomComponentsConfiguration(cameraFeedback: cameraFeedback,
                                                         idCaptureHelp: idCaptureHelp,
                                                         idSideLabel: idSideLabel,
                                                         separator: separator,
                                                         signature: signature,
                                                         idAutocaptureCountdownConfiguration: idAutocaptureCountdownConfiguration,
                                                         idCaptureFrame: idCaptureFrame)

    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: ButtonConfiguration {
    let normal = ButtonThemedState(alpha: 1.0,
                                   backgroundColor: .incdBackground,
                                   borderColor: .incdPrimary,
                                   borderWidth: 1.0,
                                   textColor: .incdPrimary,
                                   iconImageName: "incdOnboarding.help.clipped",
                                   iconTintColor: .incdPrimary,
                                   iconPosition: .right,
                                   iconPadding: 8)
    return ButtonConfiguration(states: .init(normal: normal))
  }
  
  ...


  // 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
  ...
}