HTMLメールもダークモードに対応しよう！

最近のOSではダークモードをサポートしているものが増えています。例えばiOSやmacOS、Windows 10、Androidなどが利用できます。そしてアプリはもちろん、Webサイトでもダークモードのサポートが望まれています。

ライトモード、ダークモードはユーザが設定するものなので、彼ら自身がその状態での表示を望んでいると言えるでしょう。HTMLもまた、ライトモード/ダークモードをサポートすることでユーザビリティを高められるはずです。

ダークモードをサポートするメールアプリについて

現在、ダークモードをサポートするメールアプリは多くありません。

• iOSの標準メールアプリ
• Outlook for macOS
• Mozilla Thunderbird for Windows

Gmailアプリについては今後サポートが予定されています。Gmail for iOSについてはスプラッシュスクリーンがすでにダークモードに対応しており、間もなくサポートされると思われます。

ダークモードに対応したHTMLメールの書き方

まずheadタグ内にstyleタグを書きます。そして:rootにてcolor-schemeを定義します。この設定がないとうまく認識されません。

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

そしてデフォルト（ライトモード）のスタイル設定を記述します。

body {
  background-color: #eee;
  color: #111;
}

そして prefers-color-scheme でダークモードの指定、さらにスタイル設定を記述します。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #eee;
  }
}

このように書くことでダークモードに対応したHTMLメールが完成します。

ダークモードのメール

ライトモード、ダークモードでメールの内容を変える

display設定によって、ライトモードとダークモードで情報の出し分けが可能です。例えばHTMLメールの本文を次のようにします。

<div class="light">🖖 Hello Light Mode!</div>
<div class="dark">🖖 Hello Dark Mode!</div>

そしてデフォルト（ライトモード）に合わせてダークモード時の情報を消します。

div.dark {
  display: none;
}

最後にダークモード時のスタイル設定を追加します。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #eee;
  }
  div.light {
    display: none;
  }
  div.dark {
    display: block !important;
  }
}

ダークモードに対応していないメールアプリの場合、ライトモードの情報を表示するようになります。そしてダークモードに対応している場合のみ、ライトモードの情報を非表示にできます。

（左）ライトモード時 / （右）ダークモード時

まとめ

ダークモードは今後利用が伸びていくでしょう。HTMLメールについても同様にサポートを検討すべきです。その際のテクニックとして、この記事が役に立てば幸いです。なお、HTMLメールの大量配信の際には、ぜひCustomers Mail Cloudをご利用ください。