Zenn
📪

【備忘録】Gmail でダークモードに対応させる方法

2024/11/10に公開
備忘録
メール
htmlメール
tech

はじめに

Gmail のダークモードに対応したメールを作成する際のポイントをまとめました

対応方法

  1. メールの 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>
  1. CSS でダークモード時のスタイルを定義
@media (prefers-color-scheme: dark) {
  .contents {
    background-color: #1f1f1f;
    color: #ffffff;
  }
}

@media クエリを使って、ダークモード時のスタイルを指定します

  1. ウェブ環境にも対応する
[data-ogsc] .contents {
  background-color: #1f1f1f;
  color: #ffffff;
}

[data-ogsc] は、ウェブ環境において
color-scheme が効かない問題を解決するための CSS セレクタです

主な注意点

  • color-scheme は、<meta> タグに指定する必要がある
  • color-scheme は、light と dark の 2 つの値を指定する

テスト方法

おすすめのツール

https://putsmail.com/

Putsmail は、HTML メールを簡単にテストできるツールです

まとめ

Gmail のダークモードに対応したメールを作成する際は、color-scheme を指定して、ダークモード時のスタイルを @media と [data-ogsc] で定義することがポイントです

GitHubで編集を提案

Discussion