2021/08/15

メルマガをダークモード対応する備忘録

ダークモード対応する機会があったのでメモ。
ダークモードに対応しているメーラーは背景色と文字色が反転したり、文字色の彩度が落ちます。
2021年8月時点でiOS , mac 標準搭載のメールアプリでは制御を確認しました。

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

/* ライトモードの時 */
body {
  background-color: #FFFFFF;
  color: #333333;
}

/* ダークモードの時
   ※ダークモードが存在しないアプリだとこの記述は読まれない。 */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #333333;
    color: #FFFFFF;
  }
}

Gmailだと上記の記述は無視される

GmailはiOS、Android共に記述がどうしても無視されたので、ダークモードになっても変にならないように作る必要があると思います。
反転するのが背景色と文字色なので、例えばライトモードの時、白背景に黒いロゴ（透過png）を表示させていたらダークモードの時に見えなくなってしまいます。そのため、背景ごと大きな画像にしてダークモードになった時も表示が変わらない様にするなどの対策が必要になってくると思います。