ダークモードのテーマ

ダークモードでは、システム全体のカラー環境設定を設定できます(Android 10 およびiOS 13 で導入)。”Dark”テーマは、ユーザーが好む暗い色のテーマを実装しやすくする一方で、バッテリー寿命を節約し、ユーザーの目への負担を軽減することを目的としています。

アプリ内のメッセージをろう付けすると、代替の暗いテーマを追加することができます。これは、ユーザーの好みに基づいて適切なカラーメッセージをユーザーに配信するのに役立ち、アプリのデザインとの一貫性を提供するのに役立ちます。

ダークモードの仕組み

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

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

ダークモードテーマを設定する

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

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

ダークモードの一貫した使用

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

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

互換性

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

HTML アプリ内メッセージの使用

HTML in-app メッセージ用のDark and Light テーマを作成するには、prefers-color-scheme CSS メディア機能を使用して、ユーザーの好みを検出できます。

次に例を示します。

```css @media (prefers-color-scheme: dark) { body { background: #333; color: white; } }

@media (優先配色: ライト) { body { background: white; color: #555; } } ```