NowChatThemeable プロトコル: iOS
NowWebThemeable プロトコルには、ネイティブ Web ビューで ServiceNow インスタンスでホストされている Web ページ内で使用される色を上書きできるプロパティが用意されています。
このプロトコルには、 ColorAdaptable を拡張する NowWebColoring 色オブジェクトが含まれています。ColorAdaptable は、デバイスのディスプレイ設定に基づいて、明るい色と暗い色のどちらを表示するかを自動的に決定するために使用されます。
public protocol NowChatThemeable {
var color: NowChatColoring { get }
}NowChatColoring プロトコルにはNowUIColoringが含まれています。このプロパティは、 NowWebThemeable が使用できる既定の色変数を参照するために使用されます。
UI のテーマ設定方法についての詳細は、『Mobile SDK Developer Guide - iOS (Mobile SDK 開発者ガイド - iOS)』の「 NowUIColoring を使用して NowWebTheme と NowChatTheme をテーマ化する 」を参照してください。
デフォルトの色を使用してチャットカラーを定義する
/// Sample structure for using default colors that comes with Mobile SDK.
struct ChatColors: NowUIColoring {
}
カスタム色を使用した ChatColors の定義
/// 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")
}NowChatThemeable プロトコルを使用して ChatTheme 構造体を定義する
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)
}
}入力として ChatColor を渡して ChatTheme オブジェクトをインスタンス化する
let chatTheme = CarrascoChatTheme(chatColors: ChatColors())ChatTheme オブジェクトを NowChatService.makeChatUI () に渡す
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
}
}