Skip to content

ダークモードテーマ

この記事は従来のエディターに適用されます。ダークモードは、システム全体のカラー設定をユーザーが選択できる機能です（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-scheme CSSメディア機能を使用して、ユーザーの設定を検出できます。

例:

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;
  }
}
New Stuff!