htmlメールをダークモード対応させた

マーケティング業務も担うため、htmlメールの改修を行なったりもします。
htmlメールの参考記事は少ない方（だと思っている）で四苦八苦したので、
今後誰かのためにと思い、すごくざっくり、殴り書き的にやったことをまとめたいと思います。

ダークモードへの挑戦

だいぶ前からダークモード対応したい方針はあったと記憶してますが、誰もやらなかったのでこの機会にやってみました。

こんな感じでダークモードは実装できました。
大きくいうと画像を変更するのと文字色を変更する、この2点です。

実際のコード

ある程度土台になるコードに関してはstyleの中で定義しているので、例に漏れずstyleの中で。
あとはmetaタグはhead内に。

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

@media (prefers-color-scheme: dark) {
.body {
 color: #FFFFFF;
 }
 .logo {
  background-image: url('<%= asset_path('ダークモードの時のpath') %>');
 }
}

.body {
 color: #19190F;
}
.logo{
 background-image: url('<%= asset_path('通常時のpath') %>');
}

やっていることは超シンプル。prefers-color-schemeの中でダークモード時の設定を用意するだけ。
これだけだけどうまく動くまでめちゃくちゃ苦労しました。ロゴ表示されないとかrootで変数的に管理するのかとかとか。
本当に参考にできるものが少なくてなかなかだった。

もしかするともっと上手い方法があるかもしれないし、outlook用の設定とかとか漏れているかも。
詳しい方に教えて欲しいここら辺は。

参考にしたサイト

エンジニア募集中です絶賛

htmlメールという少しレガシー?な領域の話でしたが、弊社サイトではReactとか使ってます。
フロントエンドエンジニアさん、募集してます本当に。

バックエンドエンジニアさんも募集してます