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