ダークモードテーマ

ダークモードは、ユーザーにシステム全体のカラープリファレンスを設定する機会を提供します（Android 10およびiOS 13で導入されました）。「ダーク」テーマはバッテリー寿命を節約し、ユーザーの目の負担を軽減することを目的としており、アプリ開発者にとってユーザーが好むダークカラーテーマを実装するための簡単な方法を提供します。

Brazeのアプリ内メッセージは、ユーザーの好みに基づいて適切な色のメッセージを提供するために、代替のダークテーマを追加することをサポートし、アプリのデザインとの一貫性を提供するのに役立ちます。

ダークモードの仕組み

Android 10またはiOS 13以降のバージョンを使用しているユーザーは、デバイスの設定でダークモードをオンまたはオフに切り替えることができます。

ダークモードが有効になっている場合、デバイスのネイティブメニューと画面（プッシュ通知、デバイス設定など）はダークグレーに変更されます。アプリは、アプリのコードで代替テーマを指定することにより、ダークモードをサポートすることもできます。

ダークモードテーマの設定

新しいダークモードオプションは、アプリ内メッセージを作成するときにスタイルタブにあり、デバイスでダークモードを使用しているユーザーのために代替のカラーテーマを簡単に追加できます。

このオプションを有効にすると、カラーピッカーを使用してアプリ内メッセージのダークテーマの色を選択するか、既存のカラープロファイルを選択して既存のダークまたはライトテーマを再利用できます。

ダークモードを一貫して使用する

すべてのアプリ内メッセージにダークモードを使用するには、テンプレート > アプリ内メッセージテンプレート に移動します。

そこから、ドロップダウンからカラー プロファイルを作成を選択します。ダークモードのテーマに合わせたカラープロファイルを作成します。次に、アプリ内メッセージのダークモードバージョンを作成するたびに、そのカラープロファイルを選択して、アプリ内メッセージの外観を一貫性のあるものに保つことができます。

互換性

• お客様はiOSデバイスのバージョン13以上、またはAndroidデバイスのバージョン10以上である必要があります。
• Braze iOS SDK v3.21.0+ Braze Android SDK v3.8.0+ が必要です。

アプリ内メッセージでHTMLを使用する

HTMLのアプリ内メッセージにダークテーマとライトテーマを作成するには、ユーザーの好みを検出するためにprefers-color-schemeCSSメディア機能を使用できます。

以下に例を示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #555;
  }
}