NowChatThemeable-Protokoll – iOS

Das NowWebThemeable- Protokoll bietet Eigenschaften, mit denen Sie die Farben überschreiben können, die in Webseiten verwendet werden, die auf Ihrer ServiceNow -Instanz in einer nativen Webansicht gehostet werden.

Dieses Protokoll enthält ein NowWebColoring-Farbobjekt, das ColorAdaptableerweitert. ColorAdaptable wird verwendet, um basierend auf der Anzeigeeinstellung des Geräts automatisch zu bestimmen, ob helle oder dunkle Farben angezeigt werden sollen.

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

Das NowChatColoring- Protokoll enthält NowUIColoring. Diese Eigenschaft wird verwendet, um auf Standardfarbvariablen zu verweisen, die NowWebThemeable verwenden kann.

Weitere Informationen zum Thema Design der Benutzeroberfläche finden Sie unter Verwenden Sie NowUIColoring, um NowWebTheme und NowChatTheme zu gestalten im Mobile SDK-Entwicklerleitfaden - iOS.

Definieren Sie ChatColors mit Standardfarben

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

Definieren Sie ChatColors mit benutzerdefinierten Farben

/// Use Custom Colors with light and dark theme
struct ChatColors: NowUIColoring {
    private var defaultTheme: NowChatDefaultTheme {
        NowChatDefaultTheme(nowUITheme: NowUIDefaultTheme())
    }
 
    var brand: UIColor {
        adaptiveColor(lightBrand, darkBrand)
    }
    var primary: UIColor {
        adaptiveColor(lightPrimary, darkPrimary)
    }
    var secondary: UIColor {
        adaptiveColor(lightSecondary, darkSecondary)
    }
    var textTertiary: UIColor {
        adaptiveColor(lightTextTertiary, darkTextTertiary)
    }
    var destructive: UIColor {
        adaptiveColor(lightDestructive, darkDestructive)
    }
    var textPrimary: UIColor {
        adaptiveColor(lightTextPrimary, darkTextPrimary)
    }
    var textSecondary: UIColor {
        adaptiveColor(lightTextSecondary, darkTextSecondary)
    }
    var textActionable: UIColor {
        adaptiveColor(lightTextActionable, darkTextActionable)
    }
    var screenHeaderText: UIColor {
        adaptiveColor(lightScreenHeaderText, darkScreenHeaderText)
    }
    var backgroundPrimary: UIColor {
        adaptiveColor(lightBackgroundPrimary, darkBackgroundPrimary)
    }
    var backgroundSecondary: UIColor {
        adaptiveColor(lightBackgroundSecondary, darkBackgroundSecondary)
    }
    var backgroundTertiary: UIColor {
        adaptiveColor(lightBackgroundTertiary, darkBackgroundTertiary)
    }
    var backgroundPrimaryActionable: UIColor {
        adaptiveColor(lightBackgroundPrimaryActionable, darkBackgroundPrimaryActionable)
    }
    var backgroundSecondaryActionable: UIColor {
        adaptiveColor(lightBackgroundSecondaryActionable, darkBackgroundSecondaryActionable)
    }
    var brandBackground: UIColor {
        adaptiveColor(lightBrandBackground, darkBrandBackground)
    }
    var linkPrimaryText: UIColor {
        adaptiveColor(lightLinkPrimary, darkLinkPrimary)
    }
    var linkSecondary: UIColor {
        adaptiveColor(lightLinkSecondary, darkLinkSecondary)
    }
    var separatorPrimary: UIColor {
        adaptiveColor(lightSeparatorPrimary, darkSeparatorPrimary)
    }
    var separatorTertiary: UIColor {
        adaptiveColor(lightSeparatorTertiary, darkSeparatorTertiary)
    }
    var borderTertiary: UIColor {
        adaptiveColor(lightBorderTertiary, darkBorderTertiary)
    }
    var shadow: UIColor {
        adaptiveColor(lightShadow, darkShadow)
    }
    var notification: UIColor {
        adaptiveColor(lightNotification, darkNotification)
    }
    var alertCritical0: UIColor {
        adaptiveColor(lightAlertCritical0, darkAlertCritical0)
    }
    var alertCritical3: UIColor {
        adaptiveColor(lightAlertCritical3, darkAlertCritical3)
    }

    // 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 }

    // Dark Colors
    var darkBrand: UIColor { defaultTheme.color.nowUIColor.brand }
    var darkPrimary = UIColor(hex: "#8486FF")
    var darkSecondary = UIColor(hex: "#CECFFF")
    var darkDestructive = UIColor(hex: "#E46876")
    var darkTextPrimary = UIColor(hex: "#FFFFFF")
    var darkTextSecondary = UIColor(hex: "#C1C5CD")
    var darkTextTertiary = UIColor(hex: "#8F95A1")
    var darkTextActionable = UIColor(hex: "#07080B")
    var darkScreenHeaderText = UIColor(hex: "#FFFFFF")
    var darkBackgroundPrimary = UIColor(hex: "#07080B")
    var darkBackgroundSecondary = UIColor(hex: "#151920")
    var darkBackgroundTertiary = UIColor(hex: "#252A35")
    var darkBackgroundPrimaryActionable = UIColor(hex: "#FFFFFF")
    var darkBackgroundSecondaryActionable = UIColor(hex: "#C1C5CD")
    var darkBrandBackground = UIColor(hex: "#28284D")
    var darkLinkPrimary = UIColor(hex: "#647BFD")
    var darkLinkSecondary = UIColor(hex: "#93A3FE")
    var darkSeparatorPrimary = UIColor(hex: "#8F95A1")
    var darkSeparatorTertiary = UIColor(hex: "#353B49")
    var darkBorderTertiary = UIColor(hex: "#454D5B")
    var darkShadow = UIColor(hex: "#151920")
    var darkNotification = UIColor(hex: "#E46876")
    var darkAlertCritical0 = UIColor(hex: "#7B1E28")
    var darkAlertCritical3 = UIColor(hex: "#E46876")
}

Definieren Sie die ChatTheme-Struktur mit dem NowChatThemeable-Protokoll

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)
    }
}

Instantiieren Sie das ChatTheme-Objekt, indem Sie ChatColor als Eingabe übergeben

let chatTheme = CarrascoChatTheme(chatColors: ChatColors())

ChatTheme-Objekt an NowChatService.makeChatUI übergeben ()

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
  }
}