Using Themes
AmityUIKit uses the default theme as part of the design language.
With no customization, UIKit already looks good. However, if you wish to customize the theme, you can declare changes to both colors and typography.
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 |
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)
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 |
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)
Last modified 1yr ago