1. ユーザーガイド
  2. キャンペーンとチャネル
  3. アプリ内メッセージ
  4. テンプレート

ダークモードとライトモードに基づいてアプリ内HTMLテンプレートを構成します

Overview

この記事では、カスタムHTMLインアプリテンプレートのライトモードとダークモードを自動的に切り替える方法について説明します。このアプローチを使用して、任意のHTML構造に対応できるため、ユーザーのシステムカラースキームの好みに合わせて独自のアプリ内メッセージテンプレートを適応させることができます。

ユーザーのシステム設定に基づいて、カスタムHTMLテンプレートが自動的にライトモードとダークモードを切り替えるようにするには、CSSメディアクエリを使用できます。この軽量なアプローチは、アプリ内メッセージがユーザーの好みにシームレスに適応することを保証します。使用する主なCSSツールは、 prefers-color-scheme メディアクエリと color-scheme プロパティです。

  • その prefers-color-scheme メディアクエリ : このCSS機能は、ユーザーのシステムがライトモードまたはダークモードに設定されているかどうかを検出します。メディアクエリを使用して、システム設定に応じて異なるスタイルを適用し、洗練された使いやすいアプリ内メッセージ体験を提供できます。メディアクエリは、現代のブラウザやウェブビューで動作し、アプリ内メッセージとの互換性を確保します。
  • The color-scheme プロパティ : このプロパティは、ブラウザにあなたのテンプレートがライトモードとダークモードの両方をサポートしていることを指示します。これにより、特定の要素（フォームコントロールなど）のレンダリングが改善される可能性があります。
    これらのツールを使用すると、テンプレートはユーザーのシステム設定に基づいて外観を動的に調整し、使いやすさとアクセシビリティが向上します。

実装手順

ステップ 1: カスタム HTML テンプレートを開始します

既存のHTMLコードを基盤として使用してください。ライトモードとダークモードのために別々のファイルは必要ありません。CSSは単一のテンプレート内での切り替えを処理します。In-app HTMLテンプレートに関する詳細は、 HTML In-App Templates および Sample HTML In-app Templates を参照してください。

ステップ 2: ライトモードとダークモードのために CSS を構造化する

ライトモードとダークモードの両方のスタイルを定義するために、CSSを整理してください:

  • ベーススタイルを定義する : これは、特定のカラースキームが検出されない場合や、ユーザーのシステムがライトモードにある場合に適用されるデフォルトスタイルです。通常、これらはライトモードスタイルになります。背景、テキスト、ボタン、コンテナなど、テンプレート内のすべての主要な要素のスタイルを含めてください。
  • ダークモードスタイルをメディアクエリで追加 : ダークモード専用のスタイルを上書きまたは追加するには、 @media (prefers-color-scheme: dark) クエリを使用します。これらのスタイルは、ユーザーのシステムがダークモードに設定されているときに有効になります。

ここにCSSの構造を示す例があります：

CSS 
/* 基本スタイル（ライトモードのデフォルト） */
body {
background-color: #ffffff; /* 白い背景 */
color: #000000; /* 黒いテキスト */
}
.container {
background-color: #f0f0f0; /* 薄い灰色のコンテナ */
}
button {
background-color: #007bff; /* 青いボタン */
color: #ffffff; /* 白いテキスト */
}
/* ダークモードスタイル */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212; /* ダーク背景 */
color: #ffffff; /* 白いテキスト */
}
.container {
background-color: #333333; /* ダークグレーのコンテナ */
}
button {
background-color: #ffffff; /* 白いボタン */
color: #000000; /* 黒いテキスト */
}
}

いくつかの重要なポイント

上記のコードでは：

  • 基本スタイル : これらはデフォルトで適用され、ライトモードのテンプレート内のすべての要素をカバーする必要があります。
  • ダークモードスタイル : メディアクエリはダークモードのスタイルを調整し、ユーザーの好みが変わったときにスムーズな遷移を確保します。
  • 柔軟性 : クラス名（例えば、コンテナやボタン）やプロパティをテンプレートの構造に合わせて調整してください。

ステップ 3: color-scheme プロパティを使用する

CSSのルートに color-scheme プロパティを追加して、テンプレートが両方のモードをサポートしていることを示します:

CSS 
css
:root {
color-scheme: light dark;
}

そうすることで:

  • ブラウザにコンテンツがライトモードとダークモードの両方に対応していることを理解させてください。
  • ユーザーの好みに合わせてネイティブ要素（たとえば、フォーム入力、スクロールバー）を自動的に調整します。

この内容をCSSファイルの先頭に含めてください。

ステップ 4: テンプレートの要素のスタイルをカスタマイズする

あなたのHTMLテンプレートはユニークなので、カラースキームに適応する必要がある要素を特定してください。スタイルの一般的な要素には、次のものが含まれます：

  • 背景 : ボディ、セクション、モーダル、またはその他のコンテナ。
  • テキスト : 見出し、段落、リンク、またはラベル。
  • インタラクティブ要素 : ボタン、フォーム、またはナビゲーションアイテム。
  • オーバーレイ : モーダルバックドロップまたはポップアップ。

各要素について、以下の手順に従ってください：

  • 基本スタイル（ライトモード）では、明るい背景に適した色を使用します（例えば、明るい背景に対して暗いテキストなど）。
  • ダークモードのメディアクエリでは、暗い背景に対して色を調整します（例えば、暗い背景に対して明るいテキスト）。

テンプレートが CSS フレームワーク（例えば、Bootstrap）を使用している場合、ダークモードのメディアクエリでフレームワーク固有のクラスを上書きする必要があるかもしれません。例えば：

CSS 
css
  /* ライトモードのデフォルト */
  .bg-custom {
  background-color: #e9ecef;
  }
  /* ダークモードスタイル */
  @media (prefers-color-scheme: dark) {
  .bg-custom {
  background-color: #444444;
  }
  }

Screenshot 2025-03-19 at 2.42.27 PM.png

Screenshot 2025-03-19 at 2.46.54 PM.png

ステップ5。HTMLにCSSをリンクする

HTMLファイルの

セクションにCSSがリンクされていることを確認してください：
HTML 
<link rel="stylesheet" href="path/to/your/custom.css">

他のスタイルシートを使用しているテンプレートの場合は、カスタム CSS をそれらの後に配置して、スタイルが優先されるようにしてください。

ステップ6。実装をテストする

Test your template in both modes to ensure it works as expected:

  • ライトモード : システムをライトモードに設定し、基本スタイルが正しく適用されていることを確認してください。
    Screenshot 2025-03-19 at 2.19.11 PM.png
  • ダークモード : ダークモードに切り替え、メディアクエリスタイルがベーススタイルを適切に上書きしていることを確認します。
    Screenshot 2025-03-19 at 2.18.11 PM.png

詳細については、 アプリ内キャンペーンのテスト を参照してください。

例

ここにカスタムHTML構造でどのように見えるかの例テンプレートがあります：

HTML

<html lang="ja">
<head>
<title>Lunar - 無料のBootstrapモーダルとポップアップ</title>
<!-- 必要なメタタグ -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://campaign-assets-pp.moengage.com/html-template2/assets/bootstrap/css/bootstrap.min.css">
<!-- Lunar CSS -->
<link rel="stylesheet" href="https://campaign-assets-pp.moengage.com/html-template2/assets/css/lunar.css">
<!-- フォント -->
<link rel="stylesheet" href="https://campaign-assets-pp.moengage.com/html-template2/assets/css/animate.min.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans:600" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Overpass:300,400,600,700,800,900" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="https://campaign-assets-pp.moengage.com/html-template2/assets/img/lunar.png" />
<link rel="icon" href="https://campaign-assets-pp.moengage.com/html-template2/assets/img/lunar.png" type="image/png" sizes="16x16">
<!-- ライトモードとダークモードのカスタムCSS -->
<style>
:root {
color-scheme: light dark;
}
/* ライトモード用の基本スタイル */
body {
background-color: #ffffff;
color: #000000;
}
.modal-content {
background-color: #ffffff;
}
.modal-body {
color: #000000;
}
.text-muted {
color: #6c757d !important;
}
.btn-cstm-dark {
background-color: #343a40;
color: #ffffff;
}
.btn-cstm-dark:hover {
background-color: #23272b;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
/* ダークモードスタイル */
@media (prefers-color-scheme: dark) {
body {
background-color: #121212;
color: #ffffff;
}
.modal-content {
background-color: #1e1e1e;
}
.modal-body {
color: #ffffff;
}
.text-muted {
color: #a9a9a9 !important; /* ミュートテキスト用の明るいグレー */
}
.btn-cstm-dark {
background-color: #ffffff;
color: #000000;
}
.btn-cstm-dark:hover {
background-color: #e0e0e0;
}
.modal-backdrop {
background-color: rgba(255, 255, 255, 0.2);
}
/* 必要に応じてダークモード用に画像を調整 */
img {
filter: brightness(0.8); /* オプション：ダークモード用に画像を少し暗くする */
}
}
</style>
</head>
<body class="modal-open">
<!-- モーダル -->
<div class="modal show" id="demoModal" tabindex="-1" role="dialog" aria-labelledby="demoModal" aria-hidden="true" style="display: block;">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" id="close-btn" class="close close-btn light" data-dismiss="modal" onclick="moengage.trackDismiss('close-btn'); moengage.dismissMessage()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="py-5 text-center rounded-top" style="background-color: #3E4676; background-size: 10px; background-repeat: repeat-x; background-position: 0 100.1%;">
<img src="https://campaign-assets-pp.moengage.com/html-template2/assets/img/onboard.svg" alt="Welcome Image">
</div>
<div class="modal-body">
<div class="text-center">
<h3 class="pt-3">ようこそ onboard</h3>
<p class="text-muted">
可能性を探る準備はできましたか？
</p>
<a href="#" id="get started cta" class="btn btn-cstm-dark btn-cta" data-dismiss="modal" aria-label="Close" onclick="moengage.openRichLanding('https://www.moengage.com'); moengage.trackClick('get started cta'); moengage.dismissMessage()">始める</a>
</div>
</div>
</div>
</div>
</div>
<!-- モーダル終了 -->
<div id="image"></div>
<script src="https://campaign-assets-pp.moengage.com/html-template2/assets/js/jquery.min.js"></script>
<script src="https://campaign-assets-pp.moengage.com/html-template2/assets/js/popper.min.js"></script>
<script src="https://campaign-assets-pp.moengage.com/html-template2/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://campaign-assets-pp.moengage.com/html-template2/assets/js/lunar.js"></script>
<div class="modal-backdrop show"></div>
</body>
</html>

この例では：

  • ベーススタイルはライトテーマを定義しています。
  • ダークモードメディアクエリは、ダークテーマのスタイルを調整します。

追加の考慮事項

画像とアイコンの取り扱い

テンプレートに、両方のモードで見栄えが良くない画像やアイコンが含まれている場合（たとえば、暗い背景に暗いアイコンなど）：

  • 各モードの代替バージョンを提供し、CSSを使用してそれらを入れ替えます。
  • CSSフィルターを使用して可視性を調整します。
CSS 
  css
  @media (prefers-color-scheme: dark) {
  .custom-icon {
  filter: invert(1); /* Inverts the icon color */
  }
  }

アクセシビリティの確保

両方のモードで十分なコントラストを提供しているかを確認し、外部ツールで可読性を検証してください。

フレームワーク固有の調整

テンプレートがCSSフレームワークを使用している場合、自動的に適応しないフレームワークのクラスをオーバーライドしてください。HTML内のこれらのクラスを特定し、必要に応じてダークモードのメディアクエリで調整してください。

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?