---
sourceDocument: オーストラリア API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/api-reference

 Release :

    - australia

ft:locale :

    - ja-JP

ft:publication_title :

    - オーストラリア API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# NowChatThemeable プロトコル : iOS

# NowChatThemeable プロトコル : iOS {#ariaid-title1}

* リリースバージョン: Australia
* 
* 更新日 2026年03月12日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：10分

NowChatThemeable プロトコルは、ServiceNowインスタンスでホストされているチャットページ内で使用される色を上書きできるプロパティを提供します。

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

[NowChatColoring](https://servicenow-prod.fluidtopics.net/9uAmxlmj8M9ealEbgV_Y5A#NowChatColoringiOSProtocol "NowChatColoring プロトコルは、ライブエージェントおよび仮想エージェントチャット UI の要素のデフォルトの色を定義します。") プロトコルにはNowUIColoringが含まれています。このプロパティは、 NowWebThemeable が使用できるデフォルトの色変数を参照するために使用されます。

UI のテーマを設定する方法の詳細については、『Mobile SDK 開発者ガイド - iOS』の [NowUIColoring を使用して NowWebTheme と NowChatTheme をテーマにする](https://servicenow-prod.fluidtopics.net/FdKC2mClTXwAuvOYp5xcSg "NowUIColoring インターフェイスには、すべての NowSDK モジュールで使用されるすべての色が含まれています。") を参照してください。

## デフォルトの色を使用して ChatColor を定義 {#NowChatThemeableiOSProtocol__section_eqf_nk3_tzb}

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

## カスタム色を使用して ChatColor を定義 {#NowChatThemeableiOSProtocol__section_zl2_tk3_tzb}

    /// Use Custom Colors with light theme
    struct ChatColors: NowUIColoring {
        private var defaultTheme: NowChatDefaultTheme {
            NowChatDefaultTheme(nowUITheme: NowUIDefaultTheme())
        }
     
        var brand: UIColor {
            lightBrand
        }
        var primary: UIColor {
            lightPrimary
        }
        var secondary: UIColor {
            lightSecondary
        }
        var textTertiary: UIColor {
            lightTextTertiary
        }
        var destructive: UIColor {
            lightDestructive
        }
        var textPrimary: UIColor {
            lightTextPrimary
        }
        var textSecondary: UIColor {
            lightTextSecondary
        }
        var textActionable: UIColor {
            lightTextActionable
        }
        var screenHeaderText: UIColor {
            lightScreenHeaderText
        }
        var backgroundPrimary: UIColor {
            lightBackgroundPrimary
        }
        var backgroundSecondary: UIColor {
            lightBackgroundSecondary
        }
        var backgroundTertiary: UIColor {
            lightBackgroundTertiary
        }
        var backgroundPrimaryActionable: UIColor {
            lightBackgroundPrimaryActionable
        }
        var backgroundSecondaryActionable: UIColor {
            lightBackgroundSecondaryActionable
        }
        var brandBackground: UIColor {
            lightBrandBackground
        }
        var linkPrimaryText: UIColor {
            lightLinkPrimary
        }
        var linkSecondary: UIColor {
            lightLinkSecondary
        }
        var separatorPrimary: UIColor {
            lightSeparatorPrimary
        }
        var separatorTertiary: UIColor {
            lightSeparatorTertiary
        }
        var borderTertiary: UIColor {
            lightBorderTertiary
        }
        var shadow: UIColor {
            lightShadow
        }
        var notification: UIColor {
            lightNotification
        }
        var alertCritical0: UIColor {
            lightAlertCritical0
        }
        var alertCritical3: UIColor {
            lightAlertCritical3
        }

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

## NowChatThemeable プロトコルを使用して ChatTheme 構造を定義する {#NowChatThemeableiOSProtocol__section_axh_zk3_tzb}

    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 オブジェクトをインスタンス化します {#NowChatThemeableiOSProtocol__section_ebw_2l3_tzb}

    let chatTheme = CarrascoChatTheme(chatColors: ChatColors())

## ChatTheme オブジェクトを NowChatService.makeChatUI () に渡す {#NowChatThemeableiOSProtocol__section_mhd_hl3_tzb}

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