NowChatColoring protocol - iOS

The NowChatColoring protocol defines default colors for the elements in the Live Agent and Virtual Agent chat UI.

You can modify these default colors and create your own themes for your specific chat implementation.

Tableau 1. Properties

Name	Description
alertCritical0	Color applied to the alert pop-up background. Default dark color: #7B1E28 Default light color: #F8C8CD
alertCritical2	Alert text icon color. Default value: #B61C2D
backgroundPrimary	Background color applied to the chat view background, choice picker, input background, and the card background. Default dark color: #07080B Default light color: #FFFFFF
backgroundPrimaryActionable	Background color applied to the pagination selected and pop-up backgrounds. Default dark color: #FFFFFF Default light color: #151920
backgroundSecondary	Background color applied to the bottom bar, columns in cards, and the search background in a choice picker. Default dark color: #151920 Default light color: #F6F6F8
backgroundSecondaryActionable	Background color applied to selectable inputs such as the search background and the date/time background. Default dark color: #C1C5CD Default light color: #2C323F
backgroundTertiary	Background color applied to the agent and bot chat bubbles. Default dark color: #252A35 Default light color: #E4E6EA
borderTertiary	Color applied to chat input borders. Default dark color: #454D5B Default light color: #D3D6DC
brand	Color applied to the activity indicator shown while loading pages. Default dark color: #302F4B Default light color: #302F4B
brandBackground	Background color applied to the user bubble background. Default dark color: #28284D Default light color: #D1D2EE
destructive	Color applied to UI elements that trigger destructive actions (e.g.: Delete) Default dark color: #E46876 Default light color: #B61C2D
linkPrimaryText	Color applied to links and UI elements that behave like links. Default dark color: #647BFD Default light color: #3C59E7
linkSecondary	Color applied to links on non-neutral (non-white) backgrounds. Default dark color: #93A3FE Default light color: #293D9E
notification	Color applied to the new message indicator. Default dark color: #E46876 Default light color:#B61C2D
nowUIColor	Foundation UI color theme used for all NowSDK UI elements.
primary	Color applied to buttons or actionable text. Default dark color: #8486FF Default light color: #4F52BD
screenHeaderText	Color applied to text in the chat screen header. Default dark color: #FFFFFF Default light color: #FFFFFF
secondary	Color applied to swipe action. Default dark color: #CECFFF Default light color: #1C1D42
separatorPrimary	Color applied to the chat input borders. Default dark color: #8F95A1 Default light color: #8F95A1
separatorTertiary	Color applied to dividers. Default dark color: #353B49 Default light color: #D3D6DC
shadow	Color applied to card shadow. Default dark color: #151920 Default light color: #151920
textActionable	Color applied to button text or highlighted backgrounds. Default dark color: #07080B Default light color: #FFFFFF
textSecondary	Color applied to card content and search bar icon and text. Default dark color: #C1C5CD Default light color: #2C323F
textTertiary	Color applied to weekdays in a calendar and as a placeholder. Default dark color: ##8F95A1 Default light color: #454D5B

The following shows the default colors used for NowChatColoring. You can override any or all of these colors.

public extension NowChatColoring {
    var brand: UIColor {  nowUIColor.brand }
    var primary: UIColor {  nowUIColor.primary }
    var textActionable: UIColor { nowUIColor.textActionable }
    var screenHeaderText: UIColor { nowUIColor.screenHeaderText }
    var backgroundPrimary: UIColor { nowUIColor.backgroundPrimary }
    var backgroundSecondary: UIColor {
        nowUIColor.backgroundSecondary }
    var backgroundTertiary: UIColor {
        nowUIColor.backgroundTertiary }
    var backgroundPrimaryActionable: UIColor { nowUIColor.backgroundPrimaryActionable }
    var backgroundSecondaryActionable: UIColor { nowUIColor.backgroundSecondaryActionable }
    var brandBackground: UIColor { nowUIColor.brandBackground }
    var separatorPrimary: UIColor { nowUIColor.separatorPrimary }
    var separatorTertiary: UIColor { nowUIColor.separatorTertiary }
    var borderTertiary: UIColor { nowUIColor.borderTertiary }
    var shadow: UIColor { nowUIColor.shadow }
    var linkSecondary: UIColor { nowUIColor.linkSecondary }
    var notification: UIColor { nowUIColor.notification }
    var alertCritical0: UIColor { nowUIColor.alertCritical0 }
    var alertCritical3: UIColor { nowUIColor.alertCritical3 }
}