HTMLメールでダークモードを有効にする方法–知っておくべきことすべて

新しい iOS 13 のアップデートにより、Apple Mail は暗いテーマになりました。つまり、prefers-color-scheme をサポートする最初の主要な電子メール クライアントです。 CSS メディア クエリ。そのため、ダーク テーマとライト テーマの両方に特化したメールをデザインできるようになりました。

私はダークモードの大ファンであり、目がくらむほど明るいメールは私の宿敵です。そこで、iOS 13 のダーク モードについて知ったとき、私は唯一明白なことを行い、新しい iPhone を注文してテストしました。

その間、トラブルメーカーの Outlook を含むほぼすべてのメール クライアントでダーク モードがどのように機能するかをテストしました。これが私が見つけたものです。

でもまず、prefers-color-scheme とは何ですか?
prefers-color-scheme CSS メディア クエリを使用して、ユーザーが明るいテーマと暗いテーマのどちらを好むかを検出し、両方に特化したメールを設計することができます。

iOS 13 のアップデートにより、最も一般的なメール クライアントのサポートが 2.3% から 38.4% に跳ね上がりました。 ! Apple Mail の人気のおかげで大きな一歩。驚いたことに、Outlook は Apple Mail より前にこれをサポートした唯一の電子メール クライアントでした.

一般的なメール クライアントでのダーク モードの仕組み

メール メッセージ自体を暗く表示するために、メール クライアントはメールの色をバックグラウンドで自動的に反転します。通常のユーザー間メールの場合、これはすべてのメール クライアントで一貫して適切に機能します。

ただし、受信トレイのほとんどを埋め尽くすカスタム HTML メールの場合は、それほど単純ではありません。私はトランザクションとプロモーションについて話している.

メールクライアントがダークモードのメールレンダリングを処理する方法で私が見つけた違いは次のとおりです:

メールクライアント	人気	ダーク UI	メールの色を自動反転	@media (prefers-color-scheme) をサポート
Apple メール iPhone + iPad	36.1%	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)
Gmail Android 10	27.8% *	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
Gmail iOS 13	27.8% *	✖いいえ	✖いいえ	✖いいえ	(スクリーンショットを表示)
Gmail ウェブメール	27.8% *	✔ はい	✖いいえ	✖いいえ	(スクリーンショットを表示)
展望 iOS 13	9.1% *	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
見通し Android 10	9.1% *	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
見通し Windows 10	9.1% *	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
展望 macOS	9.1% *	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)
Apple メール macOS	7.5%	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
Yahoo! ウェブメール	6.3% *	✔ はい	✖いいえ	✖いいえ	(スクリーンショットを表示)
AOL ウェブメール	6.3% *	✖いいえ	✖いいえ	✖いいえ	(スクリーンショットを表示)
Outlook.com ウェブメール	2.3%	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)
Windows 10 メール Windows 10	0.5%	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
Zoho メール ウェブメール	0.5%未満	✔ はい	✔ はい	✖いいえ	(スクリーンショットを表示)
Mozilla Thunderbird Windows 10	0.5%未満	✔ はい	✖いいえ	✔ はい	(スクリーンショットを表示)
スパーク macOS	0.5%未満	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)
スパーク iOS 13	0.5%未満	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)
スパーク Android 9	0.5%未満	✔ はい	✔ はい	✔ はい	(スクリーンショットを表示)

* 確実に区別できないため、同じメール クライアントのすべてのプラットフォームで人気が共有されます。人気のソース: Litmus、2019 年の電子メール クライアント市場シェア .

(元の投稿にアクセスして、テストからの私のメモを表示し、最新のテストを確認してください。より多くの電子メール クライアントを徐々にテストし、最初に記事を更新します。)

HTML メールをダークモード対応にする方法

私はすでにデータを使用しており、後でいくつかの Outlook 関連の課題を解決したので、メールをダーク モード フレンドリーにしました。 同じことを行う方法は次のとおりです:

データが示すこと:
55% 以上のメールが、ダーク モードが有効な状態で開かれる可能性があります。 Gmail がダークサイドに加わると、ダークモードを有効にして開封される可能性のあるメールが 83% に急上昇します!

1) 色の調整

背景色が透明または指定されていない場合にのみ色を反転するため、Apple Mail に注意してください — 白い背景はできません .あなたのメールが誰かを盲目にしないようにする最も簡単な方法は、背景色が指定されているかどうかを確認することです.デザインをより細かく制御するには、ここが prefers-color-scheme です。

構文 (@media prefers-color-scheme):

<style>
	/* Your light mode (default) styles: */
	body {
		background: white;
		color: #393939;
	}

	@media (prefers-color-scheme: dark) {
		/* Your dark mode styles: */

		body {
			background: black;
			color: #ccc;
		}
	}
</style>

デザインのヒント: 真っ白な #fff は避ける テキストの色として。本文のコントラスト比は 11.5 前後で、明るすぎず暗すぎずのバランスが取れていることがわかりました。 https://contrast-ratio.com でコントラスト比を確認するか、Chrome 開発ツールを使用してください。

2) 明るいロゴと暗いロゴの切り替え

暗い背景に暗いテキストはほとんど見えません。これは、ダーク モードが有効になっている電子メール クライアントで表示された場合、まさにロゴに起こることです。

最近では、典型的なロゴは通常、透明な背景、カラフルなアイコン、暗いコピーで構成されています。問題が見えますか？メール クライアントは画像の色を反転しないため、自分で処理する必要があります。

これに取り組むには、次のいずれかを行います:

<オール>

透明な背景ではなく白い背景でロゴを保存します (これを修正する最も簡単な方法)。しかし、このアプローチはお勧めしません — ダークモードのユーザーは満足しません.

暗い背景に明るいロゴを配置し、メールの残りの部分は白い背景にします (Litmus のやり方をご覧ください)。

ダーク モード メールをデフォルトにする。 Spotify はアプリでダーク テーマしか提供していないため、これに適した候補となります。

ロゴの明るいバージョンと暗いバージョンの両方を含め、prefers-color-scheme で切り替える メディアクエリ

私のお気に入りは最後のアプローチです。その方法は次のとおりです。

シンプルな "display: none" 暗いロゴの は、最新のすべての電子メール クライアントで問題なく機能します。しかし、驚いたことに、Outlook と Windows 10 メールでは機能しません。

CSS スタイル:

<style>
	@media (prefers-color-scheme: dark) {
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

…そして HTML 構造:

<image src="dark-logo.png" class="darkLogo" />

<!--
	To hide the light logo perfectly in Outlook and Windows 10 Mail, 
	you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

このアプローチは非常にうまく機能しますが、全体的に正しく機能するわけではありません。暗い背景に暗いテキストの問題は、ダーク モードをサポートしているが prefers-color-scheme をサポートしていない電子メール クライアントで発生します。 .それは、Outlook、Windows 10 メール、Zoho、そして潜在的に Gmail です。

したがって、メールのロゴを完全に防弾にするために、上記の方法 1 と 4 を組み合わせます。方法 1 は、ダーク モードをサポートするすべてのメール クライアントをカバーしますが、prefers-color-scheme をサポートしません。 .方法 4 は、Apple Mail、MacOS 上の Outlook、および両方をサポートする Outlook.com をカバーします。

また、白い背景にロゴを保存する代わりに、背景に合わせて幅 3 ピクセルの境界線を追加し、通常どおり透明な背景に保存します。

かなり複雑に見え始めているので (ロゴのためだけに)、最初に HTML マークアップを見てみましょう:

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
	<image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

…そして CSS スタイル:

<style>
	@media (prefers-color-scheme: light) {
		.darkLogoDefault,
		.lightLogo {
			display: none !important;
		}

		.darkLogoWrapper,
		.darkLogo {
			display: block !important;
		}
	}

	@media (prefers-color-scheme: dark) {
		.darkLogoDefault,
		.darkLogo {
			display: none !important;
		}

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

Gmail のダークモードが登場

新しい Android 10 ではダーク モードが Android に導入され、ついに Gmail も完全に暗くなるはずです。必要なのは、Android 10 と最新の Gmail (少なくともバージョン 2019.09.01.268168002) だけです。ただし、Google はサーバー側のプッシュによってユーザー向けの新機能 (この場合はダーク テーマ) を徐々に有効にする傾向があり、今のところうまくいきませんでした。

@media prefers-color-scheme がサポートされているかどうか知りたい が Gmail に登場します。私が読んだ限りでは、有望ではないようです。見つけるまで待つ必要があると思います。 Gmail でダーク テーマを有効にしたら、記事を更新します。

まとめ

HTML メールにダーク モードが追加されました。気に入っています。しかし、レイアウトに HTML テーブルを使用するだけでは不十分であるなど、もう 1 つの懸念事項があります。

メーリング リストに参加して、メールのダーク モードに関する最新情報を入手してください。また、SaaS 製品である Sidemail を構築および成長させる際に直面する洞察と課題についても共有します。

読んでくれてありがとう!