NowUIColoring を使用してテーマ NowWebTheme と NowChatTheme を使用

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間:3分
  • NowUIColoring インターフェイスには、すべての NowSDK モジュールで使用されるすべての色が含まれています。

    複数の SDK モジュール間で同様の色変数を使用するシナリオでは、 NowUIColoring インターフェイスを実装できます。このインターフェイスを使用すると、色の値を上書きし、その実装を使用して、テーマクラス NowWebTheme および NowChatTheme 内の 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
      })
    }

    ダークテーマの処理に関する注意

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