概要
この記事では、任意のカスタム HTML アプリ内テンプレートでライトモードとダークモードを自動的に切り替える方法について説明します。この方法はどのような HTML 構造にも使用でき、独自のアプリ内メッセージテンプレートをユーザーのシステムカラースキーム設定に合わせて調整できます。 ユーザーのシステム設定に基づいてカスタム HTML テンプレートのライトモードとダークモードを自動的に切り替えるには、CSS メディアクエリを使用できます。この軽量なアプローチにより、アプリ内メッセージがユーザーの設定にシームレスに適応します。使用する主な CSS ツールは、prefers-color-scheme メディアクエリと color-scheme プロパティです。
prefers-color-schemeメディアクエリ: この CSS 機能は、ユーザーのシステムがライトモードとダークモードのどちらに設定されているかを検出します。このメディアクエリを使用して、システム設定に応じて異なるスタイルを適用し、洗練されたユーザーフレンドリーなアプリ内メッセージ体験を提供できます。このメディアクエリは最新のブラウザーと WebView で動作し、アプリ内メッセージとの互換性が確保されています。color-schemeプロパティ: このプロパティは、テンプレートがライトモードとダークモードの両方をサポートしていることをブラウザーに伝え、特定の要素（フォームコントロールなど）のレンダリングを改善できます。
これらのツールを使用すると、テンプレートはユーザーのシステム設定に基づいて外観を動的に調整し、ユーザビリティとアクセシビリティが向上します。
実装手順
ステップ 1: カスタム HTML テンプレートから始める
既存の HTML コードをベースとして使用します。ライトモードとダークモード用に別々のファイルを用意する必要はありません。1 つのテンプレート内で CSS が切り替えを処理します。アプリ内 HTML テンプレートの詳細については、HTML アプリ内テンプレートおよびサンプル HTML アプリ内テンプレートを参照してください。ステップ 2: ライトモードとダークモード用に CSS を構成する
ライトモードとダークモードの両方のスタイルを定義するように CSS を整理します。- 基本スタイルを定義する: 特定のカラースキームが検出されない場合、またはユーザーのシステムがライトモードの場合に適用されるデフォルトのスタイルです。通常は、これがライトモードのスタイルになります。背景、テキスト、ボタン、コンテナーなど、テンプレート内のすべての主要な要素のスタイルを含めてください。
- メディアクエリでダークモードのスタイルを追加する: ダークモード専用のスタイルを上書きまたは追加するには、
@media (prefers-color-scheme: dark)クエリを使用します。これらのスタイルは、ユーザーのシステムがダークモードに設定されている場合に有効になります。
主なポイント
上記のコードでは、次のようになっています。- 基本スタイル: デフォルトで適用され、ライトモードでテンプレート内のすべての要素をカバーする必要があります。
- ダークモードのスタイル: メディアクエリがダークモード用にスタイルを調整し、ユーザーの設定が変更されたときにスムーズに切り替わるようにします。
- 柔軟性: クラス名（例: container や button）やプロパティは、テンプレートの構造に合わせて調整してください。
ステップ 3: color-scheme プロパティを使用する
CSS のルートにcolor-scheme プロパティを追加して、テンプレートが両方のモードをサポートしていることを示します。
CSS
- コンテンツがライトモードとダークモードの両方に対応していることをブラウザーが理解できるようになります。
- ネイティブ要素（フォーム入力、スクロールバーなど）がユーザーの設定に合わせて自動的に調整されます。
ステップ 4: テンプレートの要素のスタイルをカスタマイズする
HTML テンプレートはそれぞれ固有であるため、カラースキームに適応させる必要がある要素を特定します。スタイルを設定する一般的な要素は次のとおりです。- 背景: body、セクション、モーダル、その他のコンテナー。
- テキスト: 見出し、段落、リンク、ラベル。
- インタラクティブ要素: ボタン、フォーム、ナビゲーション項目。
- オーバーレイ: モーダルの背景やポップアップ。
- 基本スタイル（ライトモード）では、明るい背景に適した色（例: 明るい背景に暗いテキスト）を使用します。
- ダークモードのメディアクエリでは、暗い背景に合わせて色を調整します（例: 暗い背景に明るいテキスト）。
ステップ 5. CSS を HTML にリンクする
CSS が HTML ファイルの<head> セクションでリンクされていることを確認します。
HTML
ステップ 6. 実装をテストする
テンプレートが想定どおりに動作することを確認するために、両方のモードでテストします。- ライトモード: システムをライトモードに設定し、基本スタイルが正しく適用されていることを確認します。
- ダークモード: ダークモードに切り替え、メディアクエリのスタイルが基本スタイルを適切に上書きしていることを確認します。
例
カスタム HTML 構造でどのようになるかを示すテンプレートの例を次に示します。 HTML- 基本スタイルでライトテーマを定義しています。
- ダークモードのメディアクエリでダークテーマ用にスタイルを調整しています。
その他の考慮事項
画像とアイコンの扱い
テンプレートに、両方のモードで見栄えがよくない画像やアイコン（例: 暗い背景上の暗いアイコン）が含まれている場合は、次のようにします。- モードごとに代替バージョンを用意し、CSS を使用して切り替えます。
- CSS フィルターを使用して視認性を調整します。