Using Themes

Using the default theme

UIKit uses the default theme as part of the design language.

Theme customisation

With no customisation UIKit already looks good

However, if you wish to customise the theme, you can declare changes to both colours and typography.

Colours

UIKit uses a small set of declared colours to simplify the design task for developers. These colours are automatically rendered at appropriate shades to communicate states and interaction to the users.

Color	Description	Default
Primary	Used for buttons and primary call to actions	#1054DE
Secondary	Used in secondary UI elements	#292B32
Alert	Used when informing users of errors or information that requires an attention.	#FA4D30
Highlight	Used for hyperlink text	#1054DE
Base	Text presented on light background	#292B32
Base Inverse	Text presented on dark background	#FFFFFF
Message Bubble	Background colour of message bubble sent by the user	#1054DE
Message Bubble Inverse	Background colour of message bubble sent to the user	#EBECEF

Usage

To declare your own colours on iOS.

1. Declare a variable of the provided class EkoTheme

2. Set the custom theme on the client instance

// default colors
let myTheme = EkoTheme()
    
// partially overriding colors
let myTheme = EkoTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange)

// fully overriding colors
let myTheme = EkoTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange,
    alert: UIColor.systemRed,
    highlight: UIColor.systemBlue,
    base: UIColor.white,
    baseInverse: UIColor.black,
    messageBubble: UIColor.systemTeal,
    messageBubbleInverse: UIColor.systemRed)

UpstraUIKit.set(theme: myTheme)