はじめに
Gmail のダークモードに対応したメールを作成する際のポイントをまとめました
対応方法
- メールの HTML で
color-schemeを指定します
<html>
<head>
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
</head>
<body class="contents">
<!-- メール本文 -->
</body>
</html>
- CSS でダークモード時のスタイルを定義
@media (prefers-color-scheme: dark) {
.contents {
background-color: #1f1f1f;
color: #ffffff;
}
}
@media クエリを使って、ダークモード時のスタイルを指定します
- ウェブ環境にも対応する
[data-ogsc] .contents {
background-color: #1f1f1f;
color: #ffffff;
}
[data-ogsc] は、ウェブ環境において
color-scheme が効かない問題を解決するための CSS セレクタです
主な注意点
-
color-schemeは、<meta>タグに指定する必要がある -
color-schemeは、lightとdarkの 2 つの値を指定する
テスト方法
おすすめのツール
Putsmail は、HTML メールを簡単にテストできるツールです
まとめ
Gmail のダークモードに対応したメールを作成する際は、color-scheme を指定して、ダークモード時のスタイルを @media と [data-ogsc] で定義することがポイントです