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

Apply brand color

Copy link

Using the Sendbird UIKit for React, you can customize the appearance of your application by applying your brand color to the UIKit components. This feature allows you to align the user interface with your brand's color scheme, ensuring a consistent and visually cohesive experience for users.


Before you start

Copy link

You'll need to have completed the following set up: Send your first message.

Alternatively, you can use the starter code from this GitHub repository. The starter code located in the apply-brand-color/before folder contains the basic setup for the UIKit components.

Once you've completed the set up, your app should look like the image shown below.


How to customize

Copy link

Step 1 Determine colors to use

Copy link

We have five colors for primary usage, ranging from primary100 to primary500.

Use a gradient of colors for a smooth transition in your designs. Primary100 is the lightest color, ideal for backgrounds, while Primary500 is the darkest color, perfect for text and important elements due to its visibility. Primary300 is typically used as the main color due to its balanced intensity.

If you only have one primary color, you can generate variations of this primary color using online tools, which can be found by searching for "color shade generator." This allows you to expand your color palette while maintaining brand consistency.

The following is an example of a color palette that you can use for your application. You can replace the hex codes with your brand colors.

Property NameRGBSwift UIColor ExampleSuggested Usage

primary_100

168, 226, 171

UIColor(red: 168/255, green: 226/255, blue: 171/255, alpha: 1)

Backgrounds (lightest shade)

primary_200

105, 192, 133

UIColor(red: 105/255, green: 192/255, blue: 133/255, alpha: 1)

Background highlights

primary_300

37, 156, 114

UIColor(red: 37/255, green: 156/255, blue: 114/255, alpha: 1)

Primary usage (mid-tone shade)

primary_400

2, 125, 105

UIColor(red: 2/255, green: 125/255, blue: 105/255, alpha: 1)

Secondary elements

primary_500

6, 104, 88

UIColor(red: 6/255, green: 104/255, blue: 88/255, alpha: 1)

Text, important elements (darkest shade)

Step 2 Change the property

Copy link

Update the AppDelegate.swift file to change the colors of the UIKit components.

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    let APP_ID = "YOUR_APP_ID"    // TODO: Specify your Sendbird application ID.

    SendbirdUI.initialize(
        applicationId: APP_ID
    ) { params in
        // This is the builder block where you can modify the initParameter.
        //
        // [example]
        // params.needsSynchronous = false
    } startHandler: {
        // This is the origin.
        // Initialization of SendbirdUIKit has started.
        // We recommend showing a loading indicator once started.
    } migrationHandler: {
        // DB migration has started.
    } completionHandler: { error in
        // If DB migration is successful, proceed to the next step.
        // If DB migration fails, an error exists.
        // We recommend hiding the loading indicator once done.
    }
    
    SBUGlobals.currentUser = SBUUser(userId: "USER_ID") // TODO: Specify your user ID.
    
    SBUColorSet.primary100 = UIColor(red: 168/255, green: 226/255, blue: 171/255, alpha: 1)
    SBUColorSet.primary200 = UIColor(red: 105/255, green: 192/255, blue: 133/255, alpha: 1)
    SBUColorSet.primary300 = UIColor(red: 38/255, green: 156/255, blue: 114/255, alpha: 1)
    SBUColorSet.primary400 = UIColor(red: 2/255, green: 125/255, blue: 105/255, alpha: 1)
    SBUColorSet.primary500 = UIColor(red: 6/255, green: 104/255, blue: 88/255, alpha: 1)

    return true
}

Step 3 Relaunch the App

Copy link

Congratulations! You have successfully applied your brand color to the UIKit components.

To learn more about UIKit color customization, see Theme resources and Color resources.


Next Tutorial: Integrating UIKit into an Existing App

Copy link

Stay tuned for our next tutorial, where we will guide you through the process of integrating UIKit into your existing app.

Other samples

Copy link

We have more samples available in our GitHub repository.