Customize Colors with the Service Chat SDK

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

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:

In Objective-C:

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 ValueDefaultDark Mode DefaultDescription / Sample Uses
Navigation Bar Background
navbarBackground
SCSAppearanceColorTokenNavbarBackground		#FAFAFA Navigation bar background#1A2129 Navigation bar background darkBackground color for the navigation bar.
Navigation Bar Inverted
navbarInverted
SCSAppearanceColorTokenNavbarInverted		#010101 Navigation bar inverted#C6CBCF Navigation bar inverted darkNavigation bar text and icon color.
Brand Primary
brandPrimary
SCSAppearanceColorTokenBrandPrimary		#007F7F Brand primary#00B4B4 Brand primary dark 
Brand Secondary
brandSecondary
SCSAppearanceColorTokenBrandSecondary		#2872CC Brand secondary#0070D2 Brand secondary darkUsed throughout the UI for button colors. Chat: Agent text bubbles.
Primary Brand Inverted
brandPrimaryInverted
SCSAppearanceColorTokenBrandPrimaryInverted		#FBFBFB Primary inverted#FBFBFB Primary inverted dark 
Secondary Brand Inverted
brandSecondaryInverted
SCSAppearanceColorTokenBrandSecondaryInverted		#FCFCFC Secondary inverted#F7F7F7 Secondary inverted darkText on areas where a brand color is used for the background.
Contrast Primary
contrastPrimary
SCSAppearanceColorTokenContrastPrimary		#000000 Contrast primary#E2E4E6 Contrast primary darkPrimary body text color.
Contrast Secondary
contrastSecondary
SCSAppearanceColorTokenContrastSecondary		#6D6D6D Contrast secondary#898D92 Contrast secondary dark 
Contrast Tertiary
contrastTertiary
SCSAppearanceColorTokenContrastTertiary		#BABABA Contrast tertiary#A0A6AD Contrast tertiary dark 
Contrast Quaternary
contrastQuaternary
SCSAppearanceColorTokenContrastQuaternary		#F1F1F1 Contrast quaternary#09121B Contrast quaternary darkChat: Background color.
Contrast Inverted
contrastInverted
SCSAppearanceColorTokenContrastInverted		#FFFFFF Contrast inverted#323232 Contrast inverted darkPage background, navigation bar, table cell background.
Feedback Primary
feedbackPrimary
SCSAppearanceColorTokenFeedbackPrimary		#E74C3C Feedback primary#E0A7A9 Feedback primary darkText color for error messages.
Feedback Secondary
feedbackSecondary
SCSAppearanceColorTokenFeedbackSecondary		#2ECC71 Feedback secondary#9ACDB7 Feedback secondary dark 
Feedback Tertiary
feedbackTertiary
SCSAppearanceColorTokenFeedbackTertiary		#F5A623 Feedback tertiary#FADBAE Feedback tertiary dark 
Overlay
overlay
SCSAppearanceColorTokenOverlay		Contrast Primary (at 40% alpha)#323232 Contrast inverted dark 

These screenshots illustrate how the branding tokens affect the UI.

Chat UI Branding:

Chat color branding

The following code sample changes three of the branding tokens.

In Swift:

In Objective-C:

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.