NowChatThemeable 프로토콜 - iOS

NowWebThemeable 프로토콜은 네이티브 웹 뷰에서 인스턴스에 ServiceNow 호스팅된 웹 페이지 내에서 사용되는 색상을 재정의할 수 있는 속성을 제공합니다.

이 프로토콜에는 ColorAdaptable을 확장하는 NowWebColoring 색 개체가 포함되어 있습니다. ColorAdaptable 은 디바이스 디스플레이 설정에 따라 밝은 색을 표시할지 또는 어두운 색을 표시할지 여부를 자동으로 결정하는 데 사용됩니다.

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

NowChatColoring 프로토콜NowUIColoring에는 . 이 속성은 NowWebThemeable 에서 사용할 수 있는 기본 색 변수를 참조하는 데 사용됩니다.

UI 테마를 지정하는 방법에 대한 자세한 내용은 Mobile SDK 개발자 가이드 - iOS 를 참조하십시오 NowUIColoring을 사용하여 NowWebTheme 및 NowChatTheme 테마 지정 .

기본 색상을 사용하여 ChatColors 정의

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