---
sourceDocument: Australia API Reference
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/api-reference

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia API Reference

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# NowChatThemeable protocol - iOS

# NowChatThemeable protocol - iOS {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read
Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of NowChatThemeable protocol - iOS

The NowChatThemeable protocol allows customization of chat page colors in your ServiceNow instance.
It provides a structure for defining color themes through the NowUIColoring protocol, enabling a tailored chat interface experience.
Show full answer Show less  

## Key Features

* **Color Customization:** Implement the NowChatThemeable protocol to define chat colors using default or custom color options.
* **ChatColors Struct:** Create a struct to encapsulate color definitions, allowing for clear organization of colors used in chat themes.
* **Theme Integration:** Use the CarrascoChatTheme struct to integrate the defined colors with the NowChatService for a seamless UI experience.

## Key Outcomes

By implementing the NowChatThemeable protocol, you can:

* Enhance user experience through personalized chat interfaces.
* Ensure consistency in branding with customized color schemes.
* Quickly instantiate and display chat screens using your defined color themes, streamlining the setup process for chat functionalities.  
The NowChatThemeable protocol provides properties that enable you to override the colors used within chat pages hosted on your ServiceNow instance.

    public protocol NowChatThemeable {
        var color: NowChatColoring { get }
    }

The [NowChatColoring](https://servicenow-prod.fluidtopics.net/B3yG_O5~3Dhwb54b~U4aaw#NowChatColoringiOSProtocol "The NowChatColoring protocol defines default colors for the elements in the Live Agent and Virtual Agent chat UI.") protocol contains NowUIColoring. This property is used to reference default color variables that NowWebThemeable can use.

For additional information on how to theme the UI, see [Use NowUIColoring to theme NowWebTheme and NowChatTheme](https://servicenow-prod.fluidtopics.net/XpT96F9_cLEH0ofZ4p8iGg "The NowUIColoring interface contains all the colors used by all NowSDK modules.") in the Mobile SDK Developer Guide - iOS.

## Define ChatColors using default colors {#NowChatThemeableiOSProtocol__section_eqf_nk3_tzb}

    /// Sample structure for using default colors that comes with Mobile SDK.
    struct ChatColors: NowUIColoring {
    }

## Define ChatColors using custom colors {#NowChatThemeableiOSProtocol__section_zl2_tk3_tzb}

    /// Use Custom Colors with light theme
    struct ChatColors: NowUIColoring {
        private var defaultTheme: NowChatDefaultTheme {
            NowChatDefaultTheme(nowUITheme: NowUIDefaultTheme())
        }
     
        var brand: UIColor {
            lightBrand
        }
        var primary: UIColor {
            lightPrimary
        }
        var secondary: UIColor {
            lightSecondary
        }
        var textTertiary: UIColor {
            lightTextTertiary
        }
        var destructive: UIColor {
            lightDestructive
        }
        var textPrimary: UIColor {
            lightTextPrimary
        }
        var textSecondary: UIColor {
            lightTextSecondary
        }
        var textActionable: UIColor {
            lightTextActionable
        }
        var screenHeaderText: UIColor {
            lightScreenHeaderText
        }
        var backgroundPrimary: UIColor {
            lightBackgroundPrimary
        }
        var backgroundSecondary: UIColor {
            lightBackgroundSecondary
        }
        var backgroundTertiary: UIColor {
            lightBackgroundTertiary
        }
        var backgroundPrimaryActionable: UIColor {
            lightBackgroundPrimaryActionable
        }
        var backgroundSecondaryActionable: UIColor {
            lightBackgroundSecondaryActionable
        }
        var brandBackground: UIColor {
            lightBrandBackground
        }
        var linkPrimaryText: UIColor {
            lightLinkPrimary
        }
        var linkSecondary: UIColor {
            lightLinkSecondary
        }
        var separatorPrimary: UIColor {
            lightSeparatorPrimary
        }
        var separatorTertiary: UIColor {
            lightSeparatorTertiary
        }
        var borderTertiary: UIColor {
            lightBorderTertiary
        }
        var shadow: UIColor {
            lightShadow
        }
        var notification: UIColor {
            lightNotification
        }
        var alertCritical0: UIColor {
            lightAlertCritical0
        }
        var alertCritical3: UIColor {
            lightAlertCritical3
        }

        // Light Colors
        var lightBrand: UIColor { defaultTheme.color.nowUIColor.brand }
        var lightPrimary: UIColor { defaultTheme.color.nowUIColor.primary }
        var lightSecondary: UIColor { defaultTheme.color.nowUIColor.secondary }
        var lightDestructive: UIColor { defaultTheme.color.nowUIColor.destructive }
        var lightTextPrimary: UIColor { defaultTheme.color.nowUIColor.textPrimary }
        var lightTextSecondary: UIColor { defaultTheme.color.nowUIColor.textSecondary }
        var lightTextTertiary: UIColor { defaultTheme.color.nowUIColor.textTertiary }
        var lightTextActionable: UIColor { defaultTheme.color.nowUIColor.textActionable }
        var lightScreenHeaderText: UIColor { defaultTheme.color.nowUIColor.screenHeaderText }
        var lightBackgroundPrimary: UIColor { defaultTheme.color.nowUIColor.backgroundPrimary }
        var lightBackgroundSecondary: UIColor { defaultTheme.color.nowUIColor.backgroundSecondary }
        var lightBackgroundTertiary: UIColor { defaultTheme.color.nowUIColor.backgroundTertiary }
        var lightBackgroundPrimaryActionable: UIColor { defaultTheme.color.nowUIColor.backgroundPrimaryActionable
        }
        var lightBackgroundSecondaryActionable: UIColor { defaultTheme.color.nowUIColor.backgroundSecondaryActionable
        }
        var lightBrandBackground: UIColor { defaultTheme.color.nowUIColor.brandBackground }
        var lightLinkPrimary: UIColor { defaultTheme.color.nowUIColor.linkPrimaryText }
        var lightLinkSecondary: UIColor { defaultTheme.color.nowUIColor.linkSecondary }
        var lightSeparatorPrimary: UIColor { defaultTheme.color.nowUIColor.separatorPrimary }
        var lightSeparatorTertiary: UIColor { defaultTheme.color.nowUIColor.separatorTertiary }
        var lightBorderTertiary: UIColor { defaultTheme.color.nowUIColor.borderTertiary }
        var lightShadow: UIColor { defaultTheme.color.nowUIColor.shadow }
        var lightNotification: UIColor { defaultTheme.color.nowUIColor.notification }
        var lightAlertCritical0: UIColor { defaultTheme.color.nowUIColor.alertCritical0 }
        var lightAlertCritical3: UIColor { defaultTheme.color.nowUIColor.alertCritical3 }
    }

## Define ChatTheme structure with NowChatThemeable protocol {#NowChatThemeableiOSProtocol__section_axh_zk3_tzb}

    struct CarrascoChatTheme: NowChatThemeable {
        var color: NowChatColoring
        
        struct Color: NowChatColoring {
            var nowUIColor: NowUIColoring
        
            var backgroundPrimary: UIColor
            var backgroundSecondary: UIColor
            var backgroundPrimaryActionable: UIColor
            var backgroundSecondaryActionable: UIColor
            var brandBackground: UIColor
            var backgroundTertiary: UIColor
            var separatorPrimary: UIColor
            var separatorTertiary: UIColor
            var borderTertiary: UIColor
            var shadow: UIColor
            var linkSecondary: UIColor

            init(inputs: ChatColors) {
                nowUIColor = ThemeColor(inputs)
                
                backgroundPrimary = inputs.backgroundPrimary
                backgroundSecondary = inputs.backgroundSecondary
                backgroundTertiary = inputs.backgroundTertiary
                backgroundPrimaryActionable = inputs.backgroundPrimaryActionable
                backgroundSecondaryActionable = inputs.backgroundSecondaryActionable
                brandBackground = inputs.brandBackground
                separatorPrimary = inputs.separatorPrimary
                separatorTertiary = inputs.separatorTertiary
                borderTertiary = inputs.borderTertiary
                shadow = inputs.shadow
                linkSecondary = inputs.linkSecondary
            }
        }

        init(chatColors: ChatColors) {
            color = Color(inputs: chatColors)
        }
    }

## Instantiate ChatTheme object by passing ChatColor as input {#NowChatThemeableiOSProtocol__section_ebw_2l3_tzb}

    let chatTheme = CarrascoChatTheme(chatColors: ChatColors())

## Pass ChatTheme object to NowChatService.makeChatUI () {#NowChatThemeableiOSProtocol__section_mhd_hl3_tzb}

    func makeChatScreen() -> UIViewController? {
      guard let chatService = chatService else { return nil }
      let result = chatService.makeChatUI(theme: CarrascoChatTheme(chatColors: ChatColors()))
            
      switch result {
      case .success(let chatViewController):
        return chatViewController
      case .failure(let error):
        debugPrint("Chat screen creation failed with error: \(error)")
        return nil
      }
    }