【CSS】ダークモードでWebページ（HTMLメール）を開いたとき、背景色を変更したい

こんにちは！

今回は「ダークモードでWebページ（HTMLメール）を開いたとき、背景色を変更する方法」についてお伝えしたいと思います。

HTMLメールを実装していたのですが、ダークモードで開いたときのデザインを変更したくて色々調べたので共有します。

ダークモードのときに、デザインを変えるにはメディアクエリ「prefers-color-scheme: dark」を使う

メディアクエリのprefers-color-scheme: dark を使うことで、ユーザーがシステムに設定しているカラーテーマが明色か暗色かを検出することができます。

HTML

<div class="theme">test</div>

CSS

.theme { background: white; color: black; }

/* ダークモードのときに背景色を黒に変更する */
@media (prefers-color-scheme: dark) {
  .theme   { background:  black; color: white; }

/* 通常モードのときに背景色を白に変更したいときは以下のように記述する */
@media (prefers-color-scheme: light) {
  .theme   { background:  white; color: black; }

表示結果は以下のようになります。

通常モードで開いたとき

ダークモードで開いたとき

このようにprefers-color-scheme: darkを使うことで、ダークモード時に背景色を変更することができます。
今回は背景色を例に説明しましたが、ボーダー色や文字色など自由に変更してみてください。

以上、お疲れ様でした〜🍵
 

参考：https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme