Using Themes

Using the default theme

Social Plus UIKit 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 Social Plus 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)