UI customisation

Good to know: kevin. mobile SDK is is fully customizable. Every UI element can be adjusted according to your app's design - colors, fonts and most of the element styles.

To start with, create a new class overriding KevinTheme object:

CustomTheme.swift

import UIKit
import Kevin

class CustomKevinTheme : KevinTheme {
    override init() {
        super.init()
        //  This is where the customisations will go
    }
}

Set global kevin. theme to your custom one:

Kevin.shared.theme = CustomKevinTheme()

Default SDK theme fallbacks to the inset style theme. Both light and dark mode colours and assets are supported in the theme modification.

Start customising theme:

Base kevin. theme uses material theme for its base. You can see in below what material theme attributes are used for.

CustomTheme.swift

import UIKit
import Kevin

class CustomKevinTheme : KevinTheme {
    
    override init() {
        super.init()

        //  Modify content insets
        insets.left = 16
        insets.top = 24
        insets.right = 16
        insets.bottom = 25
        
        // Modify general shared colour properties between screens 
        generalStyle.primaryBackgroundColor = UIColor.lightGray
        generalStyle.primaryTextColor = UIColor.black
        generalStyle.secondaryTextColor = UIColor.gray
        generalStyle.actionTextColor = UIColor.blue
        
        //  Modify navigation bar style if you use our navigation controller
        navigationBarStyle.titleColor = UIColor.white
        navigationBarStyle.tintColor = UIColor.white
        navigationBarStyle.backgroundColorLightMode = UIColor.white
        navigationBarStyle.backgroundColorDarkMode = UIColor.black
        navigationBarStyle.backButtonImage = UIImage(named: "yourBackImage")
        navigationBarStyle.closeButtonImage = UIImage(named: "yourCloseImage")
        
        //  Modify bottom sheet (for example country selection container)
        sheetPresentationStyle.dragIndicatorTintColor = UIColor.gray
        sheetPresentationStyle.backgroundColor = UIColor.lightGray
        sheetPresentationStyle.titleLabelFont = UIFont.systemFont(ofSize: 21, weight: .medium)
        sheetPresentationStyle.cornerRadius = 10
        
        //  Modify style of the separate sections (bank selection titles)
        sectionStyle.titleLabelFont = UIFont.systemFont(ofSize: 13, weight: .semibold)
        
        //  Modify grid layout style (bank selection cells)
        gridTableStyle.cellBackgroundColor = UIColor.white
        gridTableStyle.cellSelectedBackgroundColor = UIColor.gray
        gridTableStyle.cellCornerRadius = 10
        gridTableStyle.cellBorderWidth = 1
        gridTableStyle.cellBorderColor = UIColor.gray
        gridTableStyle.cellSelectedBorderWidth = 3
        gridTableStyle.cellSelectedBorderColor = UIColor.black
        
        //  Modify list layout style (country selection cells)
        listTableStyle.cornerRadius = 10
        listTableStyle.isOccupyingFullWidth = false
        listTableStyle.cellBackgroundColor = UIColor.white
        listTableStyle.cellSelectedBackgroundColore = UIColor.gray
        listTableStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
        listTableStyle.chevronImage = UIImage(named: "yourChevronImage")
        
        //  Modify navigation link style (country selection button)
        navigationLinkStyle.backgroundColor = UIColor.white
        navigationLinkStyle.selectedBackgroundColor = UIColor.gray
        navigationLinkStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
        navigationLinkStyle.borderWidth = 0
        navigationLinkStyle.cornerRadius = 10
        navigationLinkStyle.borderColor = UIColor.black
        navigationLinkStyle.chevronImage = UIImage(named: "yourChevronImage")
        
        //  Modify main button (Continue button) style 
        mainButtonStyle.width = UIScreen.main.bounds.width - 32
        mainButtonStyle.height = 48
        mainButtonStyle.backgroundColor = UIColor.blue
        mainButtonStyle.titleLabelTextColor = UIColor.white
        mainButtonStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
        mainButtonStyle.cornerRadius = 8
        mainButtonStyle.shadowRadius = 2
        mainButtonStyle.shadowOpacity = 0.6
        mainButtonStyle.shadowOffset = CGSize(width: 1.0, height: 1.0)
        mainButtonStyle.shadowColor = UIColor.blue
    }
}