Using Themes

Using the default theme

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

Theme customization

With no customization, UIKit already looks good
However, if you wish to customize the theme, you can declare changes to both colors and typography.

Colors

UIKit uses a small set of declared colors to simplify the design task for developers. These colors 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 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 color of message bubble sent by the user
#1054DE
Message Bubble Inverse
Background color of message bubble sent to the user
#EBECEF

Usage

To declare your own colors on iOS.
    1.
    Declare a variable of the provided class AmityTheme
    2.
    Set the custom theme on the client instance
1
// default colors
2
let myTheme = AmityTheme()
3
4
// partially overriding colors
5
let myTheme = AmityTheme(
6
primary: UIColor.systemBlue,
7
secondary: UIColor.systemOrange)
8
9
// fully overriding colors
10
let myTheme = AmityTheme(
11
primary: UIColor.systemBlue,
12
secondary: UIColor.systemOrange,
13
alert: UIColor.systemRed,
14
highlight: UIColor.systemBlue,
15
base: UIColor.white,
16
baseInverse: UIColor.black,
17
messageBubble: UIColor.systemTeal,
18
messageBubbleInverse: UIColor.systemRed)
19
20
AmityUIKitManager.set(theme: myTheme)
Copied!
Last modified 25d ago