> ## Documentation Index > Fetch the complete documentation index at: https://moengage.com/docs/llms.txt > Use this file to discover all available pages before exploring further. # ダークモードとライトモードに基づくアプリ内 HTML テンプレートの設定 > MoEngage で CSS メディアクエリと prefers-color-scheme を使用して、カスタム HTML アプリ内テンプレートのダークモードとライトモードの自動切り替えを設定します。 # 概要 この記事では、任意のカスタム HTML アプリ内テンプレートでライトモードとダークモードを自動的に切り替える方法について説明します。この方法はどのような HTML 構造にも使用でき、独自のアプリ内メッセージテンプレートをユーザーのシステムカラースキーム設定に合わせて調整できます。 ユーザーのシステム設定に基づいてカスタム HTML テンプレートのライトモードとダークモードを自動的に切り替えるには、CSS メディアクエリを使用できます。この軽量なアプローチにより、アプリ内メッセージがユーザーの設定にシームレスに適応します。使用する主な CSS ツールは、`prefers-color-scheme` メディアクエリと `color-scheme` プロパティです。 * `prefers-color-scheme` **メディアクエリ**: この CSS 機能は、ユーザーのシステムがライトモードとダークモードのどちらに設定されているかを検出します。このメディアクエリを使用して、システム設定に応じて異なるスタイルを適用し、洗練されたユーザーフレンドリーなアプリ内メッセージ体験を提供できます。このメディアクエリは最新のブラウザーと WebView で動作し、アプリ内メッセージとの互換性が確保されています。 * `color-scheme` **プロパティ**: このプロパティは、テンプレートがライトモードとダークモードの両方をサポートしていることをブラウザーに伝え、特定の要素（フォームコントロールなど）のレンダリングを改善できます。\ これらのツールを使用すると、テンプレートはユーザーのシステム設定に基づいて外観を動的に調整し、ユーザビリティとアクセシビリティが向上します。 # 実装手順 ## ステップ 1: カスタム HTML テンプレートから始める 既存の HTML コードをベースとして使用します。ライトモードとダークモード用に別々のファイルを用意する必要はありません。1 つのテンプレート内で CSS が切り替えを処理します。アプリ内 HTML テンプレートの詳細については、[HTML アプリ内テンプレート](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/html-in-app-templates)および[サンプル HTML アプリ内テンプレート](/docs/ja/user-guide/campaigns-and-channels/in-app-message/templates/sample-html-in-app-templates)を参照してください。 ## ステップ 2: ライトモードとダークモード用に CSS を構成する ライトモードとダークモードの両方のスタイルを定義するように CSS を整理します。 * **基本スタイルを定義する**: 特定のカラースキームが検出されない場合、またはユーザーのシステムがライトモードの場合に適用されるデフォルトのスタイルです。通常は、これがライトモードのスタイルになります。背景、テキスト、ボタン、コンテナーなど、テンプレート内のすべての主要な要素のスタイルを含めてください。 * **メディアクエリでダークモードのスタイルを追加する**: ダークモード専用のスタイルを上書きまたは追加するには、`@media (prefers-color-scheme: dark)` クエリを使用します。これらのスタイルは、ユーザーのシステムがダークモードに設定されている場合に有効になります。 CSS の構成例を次に示します。 CSS ```css wrap theme={null} /* Base styles (default for light mode) */ body { background-color: #ffffff; /* White background */ color: #000000; /* Black text */ } .container { background-color: #f0f0f0; /* Light gray container */ } button { background-color: #007bff; /* Blue button */ color: #ffffff; /* White text */ } /* Dark mode styles */ @media (prefers-color-scheme: dark) { body { background-color: #121212; /* Dark background */ color: #ffffff; /* White text */ } .container { background-color: #333333; /* Dark gray container */ } button { background-color: #ffffff; /* White button */ color: #000000; /* Black text */ } } ``` ### 主なポイント 上記のコードでは、次のようになっています。 * **基本スタイル**: デフォルトで適用され、ライトモードでテンプレート内のすべての要素をカバーする必要があります。 * **ダークモードのスタイル**: メディアクエリがダークモード用にスタイルを調整し、ユーザーの設定が変更されたときにスムーズに切り替わるようにします。 * **柔軟性**: クラス名（例: container や button）やプロパティは、テンプレートの構造に合わせて調整してください。 ## ステップ 3: color-scheme プロパティを使用する CSS のルートに `color-scheme` プロパティを追加して、テンプレートが両方のモードをサポートしていることを示します。 CSS ```css theme={null} css :root { color-scheme: light dark; } ``` これにより、次のことが可能になります。 * コンテンツがライトモードとダークモードの両方に対応していることをブラウザーが理解できるようになります。 * ネイティブ要素（フォーム入力、スクロールバーなど）がユーザーの設定に合わせて自動的に調整されます。 これを CSS ファイルの先頭に含めてください。 ## ステップ 4: テンプレートの要素のスタイルをカスタマイズする HTML テンプレートはそれぞれ固有であるため、カラースキームに適応させる必要がある要素を特定します。スタイルを設定する一般的な要素は次のとおりです。 * **背景**: body、セクション、モーダル、その他のコンテナー。 * **テキスト**: 見出し、段落、リンク、ラベル。 * **インタラクティブ要素**: ボタン、フォーム、ナビゲーション項目。 * **オーバーレイ**: モーダルの背景やポップアップ。 各要素について、次の手順に従います。 * 基本スタイル（ライトモード）では、明るい背景に適した色（例: 明るい背景に暗いテキスト）を使用します。 * ダークモードのメディアクエリでは、暗い背景に合わせて色を調整します（例: 暗い背景に明るいテキスト）。 テンプレートで CSS フレームワーク（例: Bootstrap）を使用している場合は、ダークモードのメディアクエリでフレームワーク固有のクラスを上書きする必要がある場合があります。例: CSS ```css theme={null} css /* Light mode default */ .bg-custom { background-color: #e9ecef; } /* Dark mode styles */ @media (prefers-color-scheme: dark) { .bg-custom { background-color: #444444; } } ``` ![Screenshot 2025-03-19 at 2.42.27 PM.png](https://mintcdn.com/moengage/0iWkm50wROjmHH3Z/images/moengage_d25be3.png?fit=max\&auto=format\&n=0iWkm50wROjmHH3Z\&q=85\&s=dd7ce480fd68f4978c469fcd4fa66b06) ![Screenshot 2025-03-19 at 2.46.54 PM.png](https://mintcdn.com/moengage/t9d2bz7zij1iE1iP/images/moengage_9d5a96.png?fit=max\&auto=format\&n=t9d2bz7zij1iE1iP\&q=85\&s=04f851b43196cec7c281b16e3ee70047) ## ステップ 5. CSS を HTML にリンクする CSS が HTML ファイルの `` セクションでリンクされていることを確認します。 HTML ```css wrap theme={null} ``` テンプレートですでに他のスタイルシートを使用している場合は、カスタム CSS をそれらの後に配置して、独自のスタイルが優先されるようにします。 ## ステップ 6. 実装をテストする テンプレートが想定どおりに動作することを確認するために、両方のモードでテストします。 * **ライトモード**: システムをライトモードに設定し、基本スタイルが正しく適用されていることを確認します。 ![Screenshot 2025-03-19 at 2.19.11 PM.png](https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_351014.png?fit=max\&auto=format\&n=60BzFdXTJDO5dnCb\&q=85\&s=15374146030e46b12bf4b24423ad279e) * **ダークモード**: ダークモードに切り替え、メディアクエリのスタイルが基本スタイルを適切に上書きしていることを確認します。 ![Screenshot 2025-03-19 at 2.18.11 PM.png](https://mintcdn.com/moengage/VqQHPleQ9qk_ZsLR/images/moengage_558f0f.png?fit=max\&auto=format\&n=VqQHPleQ9qk_ZsLR\&q=85\&s=c96bb78a8b3be4b2faf424602f42ec29) 詳細については、[アプリ内キャンペーンのテスト](/docs/ja/user-guide/campaigns-and-channels/in-app-message/create/test-your-in-app-campaign)を参照してください。 # 例 カスタム HTML 構造でどのようになるかを示すテンプレートの例を次に示します。 HTML ```html wrap theme={null} Lunar - Free Bootstrap Modal and Popups
``` この例では、次のようになっています。 * 基本スタイルでライトテーマを定義しています。 * ダークモードのメディアクエリでダークテーマ用にスタイルを調整しています。 # その他の考慮事項 ### 画像とアイコンの扱い テンプレートに、両方のモードで見栄えがよくない画像やアイコン（例: 暗い背景上の暗いアイコン）が含まれている場合は、次のようにします。 * モードごとに代替バージョンを用意し、CSS を使用して切り替えます。 * CSS フィルターを使用して視認性を調整します。 CSS ```css theme={null} css @media (prefers-color-scheme: dark) { .custom-icon { filter: invert(1); /* Inverts the icon color */ } } ``` ### アクセシビリティの確保 選択した色が両方のモードで十分なコントラストを提供していることを確認し、外部ツールで読みやすさを検証してください。 ### フレームワーク固有の調整 テンプレートで CSS フレームワークを使用している場合は、自動的に適応しないフレームワークのクラスを上書きしてください。HTML 内でこれらのクラスを特定し、必要に応じてダークモードのメディアクエリで調整します。 This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.