---
sourceDocument: Xanadu API リファレンス
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/ja-JP/xanadu/api-reference

 Release :

    - xanadu

ft:locale :

    - ja-JP

ft:publication_title :

    - Xanadu API リファレンス

ft:clusterId :

    - crapiref

bundleId :

    - crapiref

workflow :

    - Creator


---

# NowUIColoring を使用して NowWebTheme と NowChatTheme をテーマ化する

# NowUIColoring を使用して NowWebTheme と NowChatTheme をテーマ化する {#ariaid-title1}

* リリースバージョン: Xanadu
* 
* 更新日 2024年08月01日
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 所要時間：3分

NowUIColoring インターフェイスには、すべての NowSDK モジュールで使用されるすべての色が含まれています。
複数の SDK モジュール間で同様の色変数を使用するシナリオでは、 NowUIColoring インターフェイスを実装できます。このインターフェイスを使用すると、色の値をオーバーライドし、その実装を使用して、テーマクラス [NowWebTheme](https://servicenow-prod.fluidtopics.net/NWqG2QTLF2l_QU7Uj84Hig "NowWebTheme インターフェイスには、ネイティブ Web ビューの ServiceNow インスタンスでホストされている Web ページ内で使用される色を上書きできるプロパティが用意されています。") および [NowChatTheme](https://servicenow-prod.fluidtopics.net/vCk04GaZOttTD~NNNd0AAQ "NowChatTheme インターフェイスは、ライブエージェント および 仮想エージェント チャット UI の要素の既定の色を定義します。")内のnowUIColoring値をオーバーライドできます。色変数がオーバーライドされない場合、 NowUIColoring インターフェイスはデフォルトの色を使用します。

次のコード例は、Web UI とチャット UI の両方の色を上書きする方法を示しています。

    // Implement the NowUIColoring and override desired color variables
    val nowUIColoringImpl = object : NowUIColoring {
      override val brand: NowUIAdaptiveColor
        get() = NowUIAdaptiveColor(lightColor = Color.BLACK, darkColor = Color.WHITE)

      override val textPrimary: NowUIAdaptiveColor
        get() = NowUIAdaptiveColor(lightColor = Color.BLACK, darkColor = Color.WHITE)

      //override the rest of color variables

    }

    // Override the nowUIColoring for NowWeb value using the NowUIColoring implementation
    lifecycleScope.launch {
      sdkManager.getNowWebService()?.launch(this@MainActivity, URL("https://instance-name.service-now.com"), object : NowWebTheme {
        override val nowUIColoring: NowUIColoring
          get() = nowUIColoringImpl
      })
    }

    //Override the nowUIColoring for NowChat value using the NowUIColoring implementation
    lifecycleScope.launch {
      sdkManager.getNowChatService()?.start(this@MainActivity, object : NowChatTheme {
        override val nowUIColoring: NowUIColoring
          get() = nowUIColoringImpl
      })
    }

## ダークテーマの処理に関する注意 {#mobsdk-and-color-theming__section_r5d_hnd_pzb}

NowUIAdaptiveColor クラス内では、テーマ クラスの色変数をオーバーライドするときに、明るいテーマ用と暗いテーマ用の 2 つの Int Color 値を渡すことができます。2 番目のパラメーター darkColor はオプションです。色の値を渡さない場合は、デフォルトの色の値が使用されます。使用される既定のテーマ (明または暗) は、ユーザーの電話設定に基づきます。  

    lifecycleScope.launch {
      sdkManager.getNowWebService()?.launch(this@MainActivity, URL("https://instance-name.service-now.com"), object : NowWebTheme {
        override val brand: NowUIAdaptiveColor
          //Setting lightColor only. For dark theme, default color are used.
          get() = NowUIAdaptiveColor(lightColor = Color.BLACK)

        override val primary: NowUIAdaptiveColor
          //Setting both lightColor and darkColor
          get() = NowUIAdaptiveColor(lightColor = Color.BLACK, darkColor = Color.WHITE)

        // Override the rest of color variables
      })
    }