--- schema_version: "1" id: 86908812a79c52b42d3d5cd70871616030abb3a162aeee2e7b3b735f17c03a0c title: Customize Colors with the collection: legacydeveloper version: current locale: en-us portal_url: https://docs.salesforce.com/legacydeveloper/current/en-us/service_sdk_ios/customize_colors.md canonical_url: https://developer.salesforce.com/docs/atlas.en-us.service_sdk_ios.meta/service_sdk_ios/customize_colors.htm source_site: developer.salesforce.com content_type: documentation content_hash: 5d45ac4edaea9472b6f4d5b15481c2e90eeca78348f7b970fbdcac26d1eb0810 description: Customize the colors by defining the branding token colors used throughout the interface. --- # Customize Colors with the Customize the colors by defining the branding token colors used throughout the interface. ![Important](https://developer.salesforce.com/docs/atlas.en-us.service_sdk_ios.meta/service_sdk_ios/images/icon_note_important.png) #### 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](https://help.salesforce.com/s/articleView?id=service.miaw_intro_landing.htm&type=5&language=en_US) before that date. Messaging offers many of the [chat features that you](https://help.salesforce.com/s/articleView?id=service.miaw_chat_vs_messaging.htm&type=5&language=en_US) love plus asynchronous conversations that can be picked back up at any time. Learn about chat retirement in [Help](https://help.salesforce.com/s/articleView?id=001790618&type=1&language=en_US). To customize colors, create an SCAppearanceConfiguration instance, specify values for each token you want to change, and store the instance in the [appearanceConfiguration](https://forcedotcom.github.io/ServiceSDK-iOS/releases/api/234.1/Classes/SCServiceCloud.html#/c:objc\(cs\)SCServiceCloud\(py\)appearanceConfiguration) property of the [ServiceCloud](https://forcedotcom.github.io/ServiceSDK-iOS/releases/api/234.1/Classes/SCServiceCloud.html) [sharedInstance](https://forcedotcom.github.io/ServiceSDK-iOS/releases/api/234.1/Classes/SCServiceCloud.html#/c:objc\(cs\)SCServiceCloud\(cm\)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](https://github.com/forcedotcom/ServiceSDK-iOS/wiki/Handling-Dark-Mode-for-iOS-13-with-the-Service-SDK) 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

navbarBackground

SCSAppearanceColorTokenNavbarBackground

 #FAFAFA

Navigation bar background

 #1A2129

Navigation bar background dark

Background color for the navigation bar.
Navigation Bar Inverted

navbarInverted

SCSAppearanceColorTokenNavbarInverted

 #010101

Navigation bar inverted

 #C6CBCF

Navigation bar inverted dark

Navigation 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 dark

Used 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 dark

Text on areas where a brand color is used for the background.
Contrast Primary

contrastPrimary

SCSAppearanceColorTokenContrastPrimary

 #000000

Contrast primary

 #E2E4E6

Contrast primary dark

Primary 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 dark

Chat: Background color.
Contrast Inverted

contrastInverted

SCSAppearanceColorTokenContrastInverted

 #FFFFFF

Contrast inverted

 #323232

Contrast inverted dark

Page background, navigation bar, table cell background.
Feedback Primary

feedbackPrimary

SCSAppearanceColorTokenFeedbackPrimary

 #E74C3C

Feedback primary

 #E0A7A9

Feedback primary dark

Text 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](https://developer.salesforce.com/docs/atlas.en-us.service_sdk_ios.meta/service_sdk_ios/images/branding-chat-ios.png) ## 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](https://github.com/forcedotcom/ServiceSDK-iOS/wiki/Handling-Dark-Mode-for-iOS-13-with-the-Service-SDK).