メールにおけるダークモードのサポートは3つに分かれ、そのうちほとんどの送信者がデザインの対象にしているのは1つだけです。 一部のクライアントは@media (prefers-color-scheme: dark)を記述どおりに正確に尊重します。別のクライアントは、それを黙って絶対にマッチしない構文に書き換え、代わりに独自の自動反転ヒューリスティックにフォールバックします。第3のグループは、より新しいcolor-schemeメタタグをほとんど認識しません。最初のグループだけを対象にデザインすることは、受信トレイの半分未満だけを対象にデザインすることを意味します。
グループ1: メディアクエリを尊重するクライアント
caniemail.comによると、@media (prefers-color-scheme: dark)はGmail(全プラットフォーム)とApple Mail(macOS 12.4以降/iOS 13.0以降)で完全にサポートされています。Outlookもほとんどの環境でそれに迫っています——Windows版(2016以降)、macOS版(16.70以降)、Outlook.com(2019年7月以降)、モバイル版(2020年1月以降)は、いずれもこのクエリを認識しますが、macOS版OutlookとOutlook.comはこれに加えて独自のダークモード用データ属性も適用します。Samsung Email(Android 6.1以降)も完全に実装しています。合わせると、caniemail.comのテスト対象パネル全体でのサポート率は**41.86%**です——主要クライアントの実質的な過半数ではありますが、すべてには遠く及びません。
グループ2: クエリを絶対にマッチしない形に書き換えるクライアント
これが、ほとんどの送信者が目にしてきた、壊れて見えるダークモードのメールを実際に生み出しているグループです。Yahoo Mail、AOL、Fastmailはprefers-color-schemeを単純に無視しているわけではありません——それを、決してtrueと評価されることのない不正な構文(@media ( _filtered_a ))に書き換え、その中のすべてのルールを黙って無効化します。HEYも同様に、クエリを@media (false)に書き換えます。どちらの場合も、クライアントはその後、元のライトモードデザインに対して独自の自動色反転ヒューリスティックにフォールバックします——これこそが、誰も明示的にデザインしていない、色あせたロゴや読めないほど低コントラストなテキストを生み出す原因です。送信者が実際に書いたものは、その結果にまったく関与していないからです。
グループ3: ほとんど採用されていないcolor-schemeメタタグ
<meta name="color-scheme" content="light dark">(および類似のsupported-color-schemes)は、そのメールが意図的にどのモード向けにデザインされているかをクライアントに伝えるためのもので、クライアントは推測に頼らず自動反転を完全にスキップできるようになります。これはより的確な解決策ですが——caniemail.comによると、合計採用率はわずか**4.88%**にとどまり、意味のあるサポートは新しいバージョンのApple Mail(macOS 16以降/iOS 12.4以降)とGmailのデスクトップWebメール(2023年9月以降)に限られます。他のほとんどのクライアントはこれを完全に無視します。
デザインにとっての意味
3つのグループすべてを一度にカバーする単一のCSSルールは存在しません——これはどれか1つの技術の欠陥ではなく、上記の分裂の直接的な帰結です。信頼できるアプローチはプログレッシブエンハンスメントであり、これはLitmusのダークモードガイドも行き着いているのと同じ原則です:
- まず、しっかりした完全に読みやすいライトモードのメールをデザインします。 これは、グループ2の自動反転クライアントを含め、すべてのクライアントがフォールバックするベースラインです。
- その上に明示的な
prefers-color-schemeのオーバーライドを重ねます。 これを実際に適用してくれる約42%のクライアント向けです——採用率がはるかに低いことを踏まえ、メタタグだけに頼らないでください。 - ロゴや画像素材を自動反転に対して防弾仕様にします: 完全な白背景の上に置かれた半透明のPNGは、グループ2のクライアントでは反転して読めないダーク・オン・ダークの惨状になりかねません。素材の背後にさりげない境界線や単色の背景を敷いておけば、透明なPNGそのままでは生き延びられない反転にも耐えられます。
- 暗い背景だからといって、テキスト色がダークモードを意識したものになっているとは決して思い込まないでください——グループ2の自動反転は、送信者が期待するようにテキストには触れずに背景だけを反転させることがあります。そのため、明示的に設定されたテキスト色は、ダークモード下でこそ、より重要になります。
同じクライアント別の内訳を、MailInApp自身のスタジオとフォールバックエンジンに適用したものについては、メールクライアントのサポート状況を参照してください。