Chat UIKit iOS UIKit v3
Chat UIKit iOS UIKit
Chat UIKit
iOS UIKit
Version 3

Color resources

Copy link

The SBUColorSet class manages a set of UIColor properties used in UIKit views, which includes background and main colors. While the UIKit provides a default color set, you can customize the values of SBUColorSet and create your own colorful views. See what the default color palette used in SBUColorSet looks like below.

Note : You need to configure custom colors prior to initializing the views in view controller.


Primary

Copy link

Primary color is the color displayed most frequently across your app's screens and components. It is not just a stylistic choice but a strategic tool for enhancing user experience, ensuring accessibility, and strengthening brand identity.

This image shows how primary colors are applied to various UI components like buttons and message bubbles.

Primary color variants

Copy link

Your primary color can have different shades to create a comprehensive color theme for your app. This includes darker and lighter versions of the primary color, allowing for a more flexible and cohesive design across various UI components.

This image displays the gradient of primary colors from dark to light.

Primary-main

Copy link

Used for elements like header buttons, outgoing message bubbles, spinners, and more in the light theme.

Primary-light

Copy link

Used for pressed state of buttons and outgoing message bubble in the dark theme, such as the header button, outgoing message bubble, spinner and more.

Primary-dark

Copy link

Used for pressed state of buttons and message bubbles in the light theme.

Primary-extra dark

Copy link

Used for selected state of reactions elements in the dark theme.

Primary-extra light

Copy link

Used for selected state of reactions elements in the light theme.


Secondary

Copy link

Secondary color provides more ways to accent and distinguish your product. Having a secondary color is optional, and should be applied sparingly to accent select parts of your UI.

Secondary color variants

Copy link

Just like the primary color, your secondary color can have dark and light variants. A color theme can use your primary color, secondary color, and dark and light variants of each color.

This image displays the gradient of secondary colors from dark to light.

Secondary-main

Copy link

Used for read receipt icons, broadcast icons, confirmations icons and more in the light theme.

Secondary-light

Copy link

Used for read receipt icons, broadcast icons, confirmations icons and more in the dark theme.


Typically, error colors do not represent the brand. Instead, they are used to highlight actions that users need to be cautious about, such as Delete or Leave functionalities, or to indicate important information like badges showing the number of unread messages.

Error color variants

Copy link

Your error color can also have different shades to create a comprehensive color theme for your app, including darker and lighter versions of the error-main color.

This image displays the gradient of error colors from dark to light.

Error-main

Copy link

Used for actions like Delete and Leave, and badges indicating the number of unread messages in the light theme.

Error-light

Copy link

Used for actions like Delete and Leave, and badges indicating the number of unread messages in the dark theme.


Information

Copy link

The information color is used to indicate important information, such as a status banner indicating frozen channels.

Information color variants

Copy link

Your information color can also have different shades to create a comprehensive color theme for your app, including darker and lighter versions of the information-main color.

Information-extra light

Copy link

Used for informational top banners to represent information such as the frozen status in the light theme.


Customize colors

Copy link

You can override the properties of SBUColorSet to customize the colors. However, you must also customize and apply the changes to the theme that's using the colors. Make sure you select and change colors you wish to use in your client app and then customize the theme accordingly.

SBUColorSet.background100 = .red

Note : Change the color values before you customize the theme.

List of colors for elements

Copy link
ElementColor

primary100

UIColor(red: 219.0 / 255.0, green: 209.0 / 255.0, blue: 1.0, alpha: 1.0)

primary200

UIColor(red: 194.0 / 255.0, green: 169.0 / 255.0, blue: 250.0 / 255.0, alpha: 1.0)

primary300

UIColor(red: 116.0 / 255.0, green: 45.0 / 255.0, blue: 221.0 / 255.0, alpha: 1.0)

primary400

UIColor(red: 98.0 / 255.0, green: 17.0 / 255.0, blue: 200.0 / 255.0, alpha: 1.0)

primary500

UIColor(red: 73.0 / 255.0, green: 19.0 / 255.0, blue: 137.0 / 255.0, alpha: 1.0)

secondary100

UIColor(red: 168.0 / 255.0, green: 226.0 / 255.0, blue: 171.0 / 255.0, alpha: 1.0)

secondary200

UIColor(red: 105.0 / 255.0, green: 192.0 / 255.0, blue: 133.0 / 255.0, alpha: 1.0)

secondary300

UIColor(red: 37.0 / 255.0, green: 156.0 / 255.0, blue: 114.0 / 255.0, alpha: 1.0)

secondary400

UIColor(red: 2.0 / 255.0, green: 125.0 / 255.0, blue: 105.0 / 255.0, alpha: 1.0)

secondary500

UIColor(red: 6.0 / 255.0, green: 104.0 / 255.0, blue: 88.0 / 255.0, alpha: 1.0)

background50

UIColor(white: 1.0, alpha: 1.0)

background100

UIColor(white: 238.0 / 255.0, alpha: 1.0)

background200

UIColor(white: 224.0 / 255.0, alpha: 1.0)

background300

UIColor(white: 189.0 / 255.0, alpha: 1.0)

background400

UIColor(white: 57.0 / 255.0, alpha: 1.0)

background500

UIColor(white: 44.0 / 255.0, alpha: 1.0)

background600

UIColor(white: 22.0 / 255.0, alpha: 1.0)

background700

UIColor(white: 0.0, alpha: 1.0)

overlay01

UIColor(white: 0.0, alpha: 0.55)

overlay02

UIColor(white: 0.0, alpha: 0.32)

onlight01

UIColor(white: 0.0, alpha: 0.88)

onlight02

UIColor(white: 0.0, alpha: 0.5)

onlight03

UIColor(white: 0.0, alpha: 0.38)

onlight04

UIColor(white: 0.0, alpha: 0.12)

ondark01

UIColor(white: 1.0, alpha: 0.88)

ondark02

UIColor(white: 1.0, alpha: 0.5)

ondark03

UIColor(white: 1.0, alpha: 0.38)

ondark04

UIColor(white: 1.0, alpha: 0.12)

error100

UIColor(red: 253.0 / 255.0, green: 170.0 / 255.0, blue: 170.0 / 255.0, alpha: 1.0)

error200

UIColor(red: 246.0 / 255.0, green: 97.0 / 255.0, blue: 97.0 / 255.0, alpha: 1.0)

error300

UIColor(red: 222.0 / 255.0, green: 54.0 / 255.0, blue: 11.0 / 255.0, alpha: 1.0)

error400

UIColor(red: 191.0 / 255.0, green: 7.0 / 255.0, blue: 17.0 / 255.0, alpha: 1.0)

error500

UIColor(red: 157.0 / 255.0, green: 9.0 / 255.0, blue: 30.0 / 255.0, alpha: 1.0)

information

UIColor(red: 173.0 / 255.0, green: 201.0 / 255.0, blue: 1.0, alpha: 1.0)

highlight

UIColor(red: 1.0, green: 242.0 / 255.0, blue: 182.0 / 255.0, alpha: 1.0)