HTMLメールのダークモード対応を試みて分かったことを共有します。
ダークモードの識別は難しい
メールクライアントにおいて通常モードかダークモード対応かを識別することは難しいです。
通常のWebサイトであれば以下のメディアクエリを利用することで、ダークモードの場合は通常と別のcssを適用させることが可能です。
@media (prefers-color-scheme: dark)
メールクライアントでは、上記のメディアクエリで識別できないケースがありました。iPhoneのデフォルトのiCloudメールクライアント及びYahooメールはメディアクエリで識別可能でしたが、iPhone及びAndroidのGmailでは識別できませんでした。Gmailでできないと、多くのユーザーへ影響が出てしまうため、別の方法を検討する必要が出てきました。
調べていくとGmail特有のクラス名などを利用すれば対応できないということはなさそうでしたが、処理が複雑になることやGmailの仕様変更により崩れることが懸念されました。また、私たちのケースではダークモードにすることで影響がでた箇所は限定的で、大きな工数をとってまで対応する必要はないと考えられました。
| Gmail | iCloudメール | Yahooメール | |
|---|---|---|---|
| iPhone | × | ○ | ○ |
| Android | × | - | ○ |
上記のメディアクエリが使えない問題を解決したとしても、色の反転問題もありました。Gmailなどではダークモード時に色が反転しているが、Yahooメールでは色が反転しませんでした。そのため、「Yahooメールの場合」という条件分岐が必要ですがこちらも難しそうでした。
ダークモードに左右されないデザインで対応
上記理由からメディアクエリで出し分けることをあきらめ、ダークモードに左右されないデザインで対応する方針としました。
特に影響が出ていた箇所は以下の2点でした。
1. 黒系のpng画像の箇所
黒やグレーなどのpng画像を利用しているとダークモードを利用した場合、背景のダークと区別が付きにくくなりデザインとしてもイマイチでした。
そこで白背景のjpg画像に変更して対応しました。
ダークモード
通常
2. グラデーション
グラデーションを指定していたところ、ダークモード利用時の色の反転により、ブランドデザインとは違うデザインになってしまう事象が発生しました。
本件はcssの色指定ではなく、画像を配置することで解決しました。赤枠部分を文字も含め丸ごと画像化しました。
ダークモード
通常
