Customize Colors with the Service Chat SDK

Customize the colors by defining the branding token colors used throughout the interface.

important: The legacy chat product is scheduled for retirement on February 14, 2026, and is in maintenance mode until then. During this phase, you can continue to use chat, but we no longer recommend that you implement new chat channels. To avoid service interruptions to your customers, migrate to Messaging for In-App and Web before that date. Messaging offers many of the chat features that you love plus asynchronous conversations that can be picked back up at any time. Learn about chat retirement in Help.

To customize colors, create an SCAppearanceConfiguration instance, specify values for each token you want to change, and store the instance in the appearanceConfiguration property of the ServiceCloud sharedInstance.

In Swift:

// Create appearance configuration instance
let appearance = SCAppearanceConfiguration()

// Customize color tokens
appearance.setColor(COLOR_VALUE, forName: TOKEN_NAME)

// Add other customizations here...

// Save configuration instance
ServiceCloud.shared().appearanceConfiguration = appearance

In Objective-C:

// Create appearance configuration instance
SCAppearanceConfiguration *appearance = [SCAppearanceConfiguration new];

// Customize color tokens
[appearance setColor:COLOR_VALUE forName:TOKEN_NAME];

// Add other customizations here...

// Save configuration instance
[SCServiceCloud sharedInstance].appearanceConfiguration = appearance;

To support dark mode in iOS 13 and later, specify adaptive colors for each branding token. The following branding tokens are available for customization.

Token Name / Swift Value / Objective-C Value	Default	Dark Mode Default	Description / Sample Uses
Navigation Bar Background<br>`navbarBackground`<br>`SCSAppearanceColorTokenNavbarBackground`	#FAFAFA	#1A2129	Background color for the navigation bar.
Navigation Bar Inverted<br>`navbarInverted`<br>`SCSAppearanceColorTokenNavbarInverted`	#010101	#C6CBCF	Navigation bar text and icon color.
Brand Primary<br>`brandPrimary`<br>`SCSAppearanceColorTokenBrandPrimary`	#007F7F	#00B4B4
Brand Secondary<br>`brandSecondary`<br>`SCSAppearanceColorTokenBrandSecondary`	#2872CC	#0070D2	Used throughout the UI for button colors. Chat: Agent text bubbles.
Primary Brand Inverted<br>`brandPrimaryInverted`<br>`SCSAppearanceColorTokenBrandPrimaryInverted`	#FBFBFB	#FBFBFB
Secondary Brand Inverted<br>`brandSecondaryInverted`<br>`SCSAppearanceColorTokenBrandSecondaryInverted`	#FCFCFC	#F7F7F7	Text on areas where a brand color is used for the background.
Contrast Primary<br>`contrastPrimary`<br>`SCSAppearanceColorTokenContrastPrimary`	#000000	#E2E4E6	Primary body text color.
Contrast Secondary<br>`contrastSecondary`<br>`SCSAppearanceColorTokenContrastSecondary`	#6D6D6D	#898D92
Contrast Tertiary<br>`contrastTertiary`<br>`SCSAppearanceColorTokenContrastTertiary`	#BABABA	#A0A6AD
Contrast Quaternary<br>`contrastQuaternary`<br>`SCSAppearanceColorTokenContrastQuaternary`	#F1F1F1	#09121B	Chat: Background color.
Contrast Inverted<br>`contrastInverted`<br>`SCSAppearanceColorTokenContrastInverted`	#FFFFFF	#323232	Page background, navigation bar, table cell background.
Feedback Primary<br>`feedbackPrimary`<br>`SCSAppearanceColorTokenFeedbackPrimary`	#E74C3C	#E0A7A9	Text color for error messages.
Feedback Secondary<br>`feedbackSecondary`<br>`SCSAppearanceColorTokenFeedbackSecondary`	#2ECC71	#9ACDB7
Feedback Tertiary<br>`feedbackTertiary`<br>`SCSAppearanceColorTokenFeedbackTertiary`	#F5A623	#FADBAE
Overlay<br>`overlay`<br>`SCSAppearanceColorTokenOverlay`	Contrast Primary (at 40% alpha)	#323232

These screenshots illustrate how the branding tokens affect the UI.

Chat UI Branding:

Chat color branding

Example

The following code sample changes three of the branding tokens.

In Swift:

// Create appearance configuration instance
let appearance = SCAppearanceConfiguration()

// Customize color tokens
appearance.setColor(
       UIColor(red: 80/255, green: 227/255, blue: 194/255, alpha: 1.0),
       forName: .brandPrimary)
appearance.setColor(
       UIColor(red: 74/255, green: 144/255, blue: 226/255, alpha: 1.0),
       forName: .brandSecondary)
appearance.setColor(
       UIColor(red: 252/255, green: 252/255, blue: 252/255, alpha: 1.0),
       forName: .brandSecondaryInverted)

// Save configuration instance
ServiceCloud.shared().appearanceConfiguration = appearance

In Objective-C:

// Create appearance configuration instance
SCAppearanceConfiguration *appearance = [SCAppearanceConfiguration new];

// Customize color tokens
[appearance setColor:[UIColor colorWithRed: 80/255
                                     green: 227/255
                                      blue: 194/255
                                     alpha: 1.0]
             forName:SCSAppearanceColorTokenBrandPrimary];
[appearance setColor:[UIColor colorWithRed: 74/255
                                     green: 144/255
                                      blue: 226/255
                                     alpha: 1.0]
             forName:SCSAppearanceColorTokenBrandSecondary];
[appearance setColor:[UIColor colorWithRed: 252/255
                                     green: 252/255
                                      blue: 252/255
                                     alpha: 1.0]
             forName:SCSAppearanceColorTokenBrandSecondaryInverted];

// Save configuration instance
[SCServiceCloud sharedInstance].appearanceConfiguration = appearance;

For an example of how to specify adaptive colors that work with the dark mode feature that was introduced in iOS 13, see Handling Dark Mode for iOS 13 with the Service SDK.