ダークモードテーマ

ダークモードは、ユーザーにシステム全体のカラープリファレンスを設定する機会を提供します（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;
  }
}