Using Themes

Search…
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 interactions 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.Create an instance from the provided class AmityTheme
2.Set the theme instance through AmityUIKitManager
// default colors
let myTheme = AmityTheme()
    
// partially overriding colors
let myTheme = AmityTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange)
​
// fully overriding colors
let myTheme = AmityTheme(
    primary: UIColor.systemBlue,
    secondary: UIColor.systemOrange,
    alert: UIColor.systemRed,
    highlight: UIColor.systemBlue,
    base: UIColor.white,
    baseInverse: UIColor.black,
    messageBubble: UIColor.systemTeal,
    messageBubbleInverse: UIColor.systemRed)
​
AmityUIKitManager.set(theme: myTheme)
​
Typography
The AmityTypography is a class that manages a set of UIFont properties used in Amity UIKit. All fonts used in our UIKit are configured under this class. 
Element
Font/Weight
Size (points)
HeaderLine
System/Bold
20
Title
System/Semibold
17
Body
System/Regular
15
Body bold
System/Semibold
15
Caption
System/Regular
13
Caption bold
System/Semibold
13
Usage
To declare your own typography on iOS:
1.Create an instance from the provided class AmityTypography.
2.Set the typography instance through AmityUIKitManager.
// default typography
let myTypography = AmityTypography()
    
// partially overriding typography
let myTypography = AmityTypography(
    headerLine: UIFont(name: "Georgia-Bold", size: 20)!,
    title: UIFont(name: "Georgia", size: 20)!)
​
// fully overriding typography
let myTypography = AmityTypography(
    headerLine: UIFont(name: "Georgia-Bold", size: 20)!,
    title: UIFont(name: "Georgia", size: 20)!,
    bodyBold: UIFont.systemFont(ofSize: 16, weight: .regular),
    body: UIFont.systemFont(ofSize: 16, weight: .regular),
    captionBold: UIFont.systemFont(ofSize: 13, weight: .regular),
    caption: UIFont.systemFont(ofSize: 13, weight: .light))
​
AmityUIKitManager.set(typography: myTypography)
Setup & Authentication
Social UIKit
Last modified 5mo ago
Export as PDF
Copy link
Outline
Using the default theme
Theme customization
Colors
Typography