HTMLメールのダークモード：宣言の書き方、CSS、クライアント別の挙動
執筆：Mara Levin ・ 2026年10月7日更新 ・ caniemailとLitmusの公開データを同日に確認
結論
ダークモード対応は「宣言」「自前のCSS」「反転されても読める配色」の三段構えで考えます。まず color-scheme で両方のモードに対応していることを宣言し、@media (prefers-color-scheme: dark) でダーク用の色と画像を用意します。ただし、このメディアクエリを解釈するのはApple Mail、Outlook.comとOutlookアプリ、Samsung Emailなどに限られ、Gmailは解釈しません。だからこそ、純白と純黒を避け、ボタンは中間色にし、ロゴは透過で作るという「保険」が必要になります。数値は caniemail.com の公開データに基づき、各項目に該当ページへのリンクを付けています。
caniemailで見るダークモード関連の4機能
| 機能 | Apple Mail | Gmail | Outlook（Windows） | Outlook.com | Samsung Email | 読み方 |
|---|---|---|---|---|---|---|
| color-scheme（CSSプロパティ） | 対応（ルート要素のみ） | 非対応 | 非対応 | 非対応 | 対応 | Apple Mailに「このメールは両方のモードに対応している」と伝える宣言。 |
| color-scheme（metaタグ） | macOSは対応、iOSは非対応 | アプリは light only のみ部分対応 | 非対応 | 非対応 | 非対応 | iOSのMailではCSS側の宣言も入れておく必要がある。 |
| @media (prefers-color-scheme) | 対応 | 非対応 | 非対応 | 対応（data-og属性が付く） | 対応 | ダーク用の配色や画像差し替えを自前で書ける唯一の標準的な手段。 |
| light-dark() | 対応（macOSはSafari 17.5相当以降のOS更新が必要） | 非対応 | 非対応 | 非対応 | 部分対応 | 先に通常の色を書き、後ろに上書きとして重ねる使い方に限る。 |
出典：caniemail.comのデータ（2026年9月16日更新）。各クライアントの最新の記録を採用しています。Outlook（Windows）はデスクトップ版（データ上は2019まで）を指します。
クライアントはダークモードで何をしているのか
メールクライアントがダークモードのときにメールをどう扱うかは、大きく三つに分かれます。Litmusのダークモードガイド（2025年2月時点の対応表）の言葉を借りると、「変更なし」「部分反転」「完全反転」です。変更なしは、アプリの画面だけが暗くなり、メール本文の見た目は変わりません。部分反転は、明るい背景の領域だけを暗くし、暗い文字を明るくする方式で、もともと暗い背景はそのまま残します。完全反転は、暗い背景まで明るく入れ替えてしまうため、ダークテーマで作ったデザインがかえってライトテーマに変わってしまうことがあります。
Litmusは、完全反転の代表としてGmailアプリ（iOS）、Outlook 2021（Windows）、Office 365（Windows）、Windowsのメールを挙げ、これらのクライアントでは自分のスタイルでダークモードを指定する手段が現時点でないと説明しています。つまり、「CSSを書けば直る」ものと「書いても届かない」ものが混在していて、その両方に備える必要があります。
Litmusの対応表には、もう一つの列があります。背景色を指定して、ダーク変換から背景を守れるかどうかです。一覧は、次の表の下に続けて載せます。ただし、背景色を守っても文字色は反転されたままになるため、背景と文字の組み合わせが崩れることがあります。
何もしなかったときの挙動と、対応できる手段
| クライアント | HTMLの扱い | @media dark | [data-ogsc] |
|---|---|---|---|
| Apple Mail（macOS）、iPhone／iPad のメール | 変更なし（メタタグがあると純白 #ffffff の背景は反転） | 対応 | 非対応 |
| Outlook.com | 部分反転 | 非対応 | 部分対応 |
| Outlook 2021（Windows） | 完全反転 | 非対応 | 非対応 |
| Outlook アプリ（iOS、Android） | 部分反転 | 非対応 | 部分対応 |
| Gmail アプリ（iOS） | 完全反転 | 非対応 | 非対応 |
| Gmail アプリ（Android） | 部分反転 | 非対応 | 非対応 |
| Office 365（Windows）、Windows のメール | 完全反転 | 非対応 | 非対応 |
| Office 365（Mac） | 部分反転 | 部分対応 | 非対応 |
出典：Litmusの対応表（2025年2月）。クライアントは更新されるので、配信先の主要クライアントは自分の端末で確認してください。配信サービスのレポートで、自分の配信リストの上位クライアントを調べ、そこから確認すると効率的です。
背景色の強制：ダーク変換から背景を守れるか
| クライアント | 背景色の強制 | 注記 |
|---|---|---|
| Apple Mail（macOS） | 対応 | メタタグがあると純白 #ffffff の背景は反転される。 |
| iPhone／iPad（iOS 16） | 対応 | 同上。 |
| Outlook.com | 非対応 | 明るい背景色は暗くされる。画像の差し替えはリンク画像なら効く。 |
| Outlook 2021（Windows） | 非対応 | VMLの部分には個別の対処法がある。 |
| Outlook アプリ（iOS） | 非対応 | 暗い背景の上の明るい文字が暗くなることがある。 |
| Outlook アプリ（Android） | 非対応 | 同上。 |
| Gmail アプリ（iOS） | 対応 | 一部の色と文字色には個別の対処法がある（CSSブレンドモードを使う方法）。 |
| Gmail アプリ（Android） | 対応 | - |
| Office 365（Windows） | 非対応 | - |
| Office 365（Mac） | 対応 | 明るい背景色は暗くされる。 |
| Windows のメール | 非対応 | - |
出典：Litmusの対応表（2025年2月）の「Forced background color support」の列。注記は同じ表の「Quirks」の列と、そこから張られた解説に基づきます。
この記事で使う用語を、先に表で整理しておきます。「部分反転」や「完全反転」はLitmusの呼び方で、クライアントの公式用語ではありません。
| 用語 | 意味 |
|---|---|
| color-scheme（CSS／meta） | メールがライトとダークのどちらに対応しているかの宣言。light dark で両対応、light only でライト専用。 |
| supported-color-schemes | color-scheme の旧名。WebKitによると、旧名もmacOS 10.14.4のMailなどで解釈される。 |
| @media (prefers-color-scheme: dark) | 利用者がダークを選んでいるときだけ適用されるCSSの条件。ダーク用の色や画像差し替えを書く場所。 |
| [data-ogsc] ／ [data-ogsb] | Outlook.comとOutlookアプリがダークモードで付ける属性。文字色（sc）と背景色（sb）を上書きするための目印。 |
| 部分反転 | 明るい背景を暗くし、暗い文字を明るくする。もともと暗い背景はそのまま残す。 |
| 完全反転 | 暗い背景も明るくする。ダークで作ったデザインがライトに変わることがある。 |
| 変更なし | アプリの外観だけが暗くなり、メール本文の色は変わらない。 |
| 強制背景色 | 背景色を指定してダーク変換から守る方法。Litmusによると、文字色は反転されたまま残る。 |
ステップ1：両方のモードに対応していることを宣言する
WebKitのDark Mode Support in WebKitは、SafariとWebKitがウェブコンテンツを自動では暗くしないことを説明しています。ページ側が color-scheme で対応を宣言して初めて、既定の文字色や背景色がシステムの外観に合わせて変わります。メールについては、同じ記事に「color-scheme: light dark を宣言すると、Mailはそのメッセージが独自のダークモード用スタイルを持っていると判断する」「light only を指定すると、ライトのメッセージを変換しないよう伝えられる」と書かれています。
<head>
<meta charset="utf-8">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
</head>2つ目の supported-color-schemes は旧名です。WebKitによると、プロパティとメタタグはもともとこの名前で、後から color-scheme に改名され、旧名もmacOS 10.14.4のMailなどで引き続き解釈されます。古い環境にも配慮して両方書くのが一般的です。caniemailのデータを見ると、メタタグはiOSでは非対応で、macOSとThunderbirdで対応、Gmailアプリでは light only だけが部分的に対応しています。iPhoneのメールにも効かせたいときは、CSS側の :root にも書いておくのが安全です。
注意したいのは、Litmusが指摘するApple Mailの挙動です。メタタグがなければ配色は変わらず、メタタグがあるのにダーク用のスタイルがなければ部分反転が起こります。宣言は約束なので、書いたら必ずダーク用のCSSも用意します。宣言の値ごとの意味を整理します。
| 指定 | 意味 | 使う場面 |
|---|---|---|
color-scheme: light dark | メールが両方のモードに対応し、独自のダーク用スタイルを持つと宣言する。 | ダーク用のCSSも用意したとき。 |
color-scheme: light only | Apple Mailに、ライト用のメッセージを変換しないよう伝える（WebKitの説明）。 | ブランドの配色を守りたく、ダーク用のスタイルを用意しないとき。 |
宣言なし | Litmusによると、Apple Mailは配色を変えない。他のクライアントは自分の判断で反転する。 | 何も指定しない場合。メタタグを入れたのにダーク用CSSがない状態は避ける。 |
ダーク用のスタイルを用意せず、ライトのまま見せたいときは、次の書き方になります。効くのはApple Mailだけで、ほかのクライアントが反転するかどうかは、メール側の指定では決まりません。
<meta name="color-scheme" content="light only">
<style>
:root { color-scheme: light only; }
</style>ステップ2：prefers-color-schemeでダーク用の配色を書く
MDNはprefers-color-schemeを、利用者がシステムからライトかダークかを要求しているかを検出するメディア特性と説明しています。メールでは、インラインのスタイルに勝つ必要があるため、すべての宣言に !important を付け、head の style ブロックに書きます。Outlook.comとOutlookアプリには、Litmusが紹介する別の方法があります。同じ規則に [data-ogsc]（文字色）と [data-ogsb]（背景色）の属性セレクタを付けて複製する方法です。caniemailのprefers-color-schemeのページにも、Outlook.comなどではダークモードで表示するときに data-ogsc、data-ogac、data-ogsb、data-ogab の属性が追加されるという注記があります。
<style>
@media (prefers-color-scheme: dark) {
.bg-main { background-color: #1a1a1a !important; }
.bg-card { background-color: #2d2d2d !important; }
.text-main { color: #f2f2f2 !important; }
.text-sub { color: #b3b3b3 !important; }
.link { color: #7aa7ff !important; }
}
/* Outlook.com と Outlook アプリ向け：同じ規則に属性セレクタを付けて複製する */
[data-ogsb] .bg-main { background-color: #1a1a1a !important; }
[data-ogsb] .bg-card { background-color: #2d2d2d !important; }
[data-ogsc] .text-main { color: #f2f2f2 !important; }
[data-ogsc] .link { color: #7aa7ff !important; }
</style>この例のリンク色は、ライトモードの #0a58ca から #7aa7ff に変えています。理由は計算で確かめられます。WCAG 2.2の達成基準1.4.3は、通常サイズの文字に4.5:1以上のコントラスト比を求めますが、#0a58ca を背景 #1a1a1a に重ねると2.70:1にしかならず、基準を満たしません。#7aa7ff なら7.29:1です。本文の #f2f2f2 は #1a1a1a の上で15.55:1、カード背景 #2d2d2d の上でも12.30:1あり、補助テキストの #b3b3b3 も #2d2d2d の上で6.57:1を確保できます。ダークモード用のスタイルを書くときは、色を単純に反転させるのではなく、組み合わせごとにコントラスト比を確かめてください。次の表は、この記事のコードで使った色の組み合わせを、WCAGの相対輝度の式で計算した結果です。
| 役割 | ライト（文字 on 背景） | 比 | ダーク（文字 on 背景） | 比 |
|---|---|---|---|---|
| ページ背景と本文 | #333333 on #f5f5f5 | 11.59:1 | #f2f2f2 on #1a1a1a | 15.55:1 |
| カードと本文 | #333333 on #ffffff | 12.63:1 | #f2f2f2 on #2d2d2d | 12.30:1 |
| 補助テキスト | #5b6470 on #ffffff | 6.00:1 | #b3b3b3 on #2d2d2d | 6.57:1 |
| リンク | #0a58ca on #ffffff | 6.44:1 | #7aa7ff on #2d2d2d | 5.77:1 |
| ボタン（文字 on 背景） | #ffffff on #0a58ca | 6.44:1 | #1a1a1a on #7aa7ff | 7.29:1 |
| エラー表示 | #b3261e on #f5f5f5 | 6.00:1 | #ff8a80 on #1a1a1a | 7.62:1 |
| 失敗例：ライトのリンク色をそのまま使う | - | - | #0a58ca on #1a1a1a | 2.70:1（基準未達） |
| 失敗例：ライトの補助色をそのまま使う | - | - | #5b6470 on #1a1a1a | 2.90:1（基準未達） |
計算値は小数第3位を四捨五入しています。「大きな文字」は18ポイント（約24px）以上、または太字14ポイント（約18.5px）以上で、基準は3:1です。
ステップ3：反転されても読める配色にする
Gmailのように自前のCSSが効かないクライアントでは、配色そのものを防御的に作るしかありません。Email on Acidはブログ記事で、Apple Mailが純黒 #000000 と純白 #FFFFFF を、コントラストにかかわらず反転することを指摘し、#000001 や #FFFFFE のようにほぼ同じ別の値を使う方法を紹介しています。Litmusも、Apple Mailでメタタグがあるとき、純白の背景が反転されると記しています。ここから導ける実務上のルールは次のとおりです。
- 背景には純白ではなく、わずかにグレーがかった白を使い、文字は純黒ではなく濃いグレーにします。
- ボタンの背景色は中間の明るさにします。反転されても色の識別ができ、白文字との組み合わせも保ちやすくなります。
- 色だけで意味を伝えないでください。WCAGの達成基準1.4.1は、色が情報を伝える唯一の視覚的手段であってはならないとしています。「期限切れ」を赤だけで示さず、文言も添えます。
- 影で区切りを表現している箇所は、暗い背景では見えなくなります。区切りには1pxの線を併用します。
アクセシビリティ全般はHTMLメールのアクセシビリティにまとめています。
ロゴと画像：透過PNGの落とし穴
もっともよくある失敗は、濃い文字の透過ロゴが暗い背景に溶けてしまうことです。Email on Acidは三つの対処を挙げています。透過PNGのまま使う方法、ロゴの周囲に淡い縁取りを付ける方法、そしてダークモード用のロゴを別に用意してメディアクエリで差し替える方法です。Litmusは、設定の自由度が低いGmailアプリやWindows版Outlook 2019などでは、濃い文字の透過PNGの周囲に半透明のアウトラインを付けることを勧めています。
<style>
.logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
.logo-light { display: none !important; }
.logo-dark { display: block !important; max-height: none !important; }
}
</style>
<img class="logo-light" src="https://example.co.jp/img/logo-dark-text.png" width="160" alt="株式会社サンプル">
<!--[if !mso]><!-->
<img class="logo-dark" src="https://example.co.jp/img/logo-light-text.png" width="160" alt="株式会社サンプル" style="display:none; max-height:0;">
<!--<![endif]-->差し替えは、メディアクエリが解釈されるクライアントでしか働きません。Gmailでは常に既定のロゴが表示されるため、既定のロゴは明るい背景と暗い背景の両方で読めるデザインにしてください。[if !mso] の条件付きコメントは、ダーク用の画像をWindows版Outlookに見せないための書き方です。
透過のアイコンやバッジが暗い背景に溶けるときは、画像の周囲に白い下地と余白を付けて、背景に関係なく読めるようにする方法もあります。次のコードは、その最小例です。
<img src="https://example.co.jp/img/badge.png" width="64" height="64" alt="送料無料"
style="display:block; padding:8px; background-color:#ffffff; border:1px solid #cccccc; border-radius:8px;">反転で起きやすい失敗と、その対処をまとめると次のとおりです。
| 症状 | 原因 | 対処 |
|---|---|---|
| 白背景のJPEG画像が、暗い本文の中で白い四角に見える | 画像は反転されない。背景だけが暗くなる。 | Litmusが勧めるように、画像の周囲に十分な余白を取り、淡い縁取りと角丸を付けて、背景との境目をなじませる。 |
| 濃い文字のロゴが背景に溶ける | 透過PNGの文字が暗い背景に重なる。 | 半透明の縁取りを付けるか、ダーク用ロゴを用意して @media で差し替える。 |
| 薄いグレーの補助文字が読めなくなる | 反転後の組み合わせでコントラストが4.5:1を下回る。 | 補助文字は #5b6470 のような中間の濃さにし、ダーク用の値も計算する。 |
| 淡い色のボタンが背景と同化する | 明るいボタンが暗い背景の上で目立たない、または文字色が反転して読めない。 | ボタンは中間色にし、文字と背景の組み合わせを両モードで確認する。 |
| 影や区切り線で作った枠が消える | 暗い背景の上で影が見えない。 | 1pxの線を併用する。影だけで区切らない。 |
| 赤と緑だけで状態を示した表示が読み取れない | 反転後の色相や明るさが変わる。 | 「未払い」「支払済み」など文言を併記する。WCAG 1.4.1。 |
原因と対処の列は、LitmusとEmail on Acidの解説と、WCAGの基準から編集部が整理したものです。
light-dark()は使えるか
CSSの light-dark() は、ライト用とダーク用の2色を1つの宣言で書ける関数です。ただし、caniemailのlight-dark()のページによると、Gmailは非対応で、Outlook（WindowsもMacも）とOutlook.comも非対応、Apple Mailはバージョンに依存します。Samsung Emailは部分対応で、HotmailやOutlookのアカウントでは使えません。ProtonMailなどには、関数は解釈されるのに色がライトのまま変わらない不具合も記録されています。現時点では、必ず通常の色を先に書き、その後に重ねる補助として使います。
/* Apple Mail や Thunderbird では効くが、Gmail と Outlook では無視される */
.text-main { color: #222222; color: light-dark(#222222, #f2f2f2); }ここまでを一つにまとめた最小のひな形
宣言、ダーク用のCSS、インラインの既定値、role="presentation" のテーブルを一つにまとめると次のようになります。インラインの値はライトモード用の既定値で、クラスの付いた要素だけが、メディアクエリを解釈するクライアントで上書きされます。Gmailのように解釈しないクライアントでは、インラインの値がそのまま使われ、色は自動反転に任されます。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>ご注文の確認</title>
<style>
:root { color-scheme: light dark; supported-color-schemes: light dark; }
@media (prefers-color-scheme: dark) {
.bg-main { background-color: #1a1a1a !important; }
.bg-card { background-color: #2d2d2d !important; }
.text-main { color: #f2f2f2 !important; }
.text-sub { color: #b3b3b3 !important; }
.link { color: #7aa7ff !important; }
.btn { background-color: #7aa7ff !important; color: #1a1a1a !important; }
}
</style>
</head>
<body lang="ja" class="bg-main" style="margin:0; padding:0; background-color:#f5f5f5;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" class="bg-main" style="padding:24px; background-color:#f5f5f5;">
<table role="presentation" width="600" style="width:100%; max-width:600px;" cellspacing="0" cellpadding="0" border="0">
<tr>
<td class="bg-card text-main" style="padding:24px; background-color:#ffffff; color:#333333; font-family:Arial, sans-serif; font-size:16px; line-height:28px;">
ご注文番号 4812 を承りました。
</td>
</tr>
<tr>
<td class="bg-card" style="padding:0 24px 24px 24px; background-color:#ffffff;">
<a href="https://example.co.jp/orders/4812" class="btn" style="display:inline-block; padding:12px 24px; background-color:#0a58ca; color:#ffffff; font-size:16px; text-decoration:none;">注文内容を確認する</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Outlook.comとOutlookアプリにも効かせたい場合は、style ブロックに [data-ogsc] と [data-ogsb] の複製を足します。この複製は、ステップ2のコード例にあるとおりです。
メールの種類ごとに、どこまでやるか
すべてのメールに同じ手間をかける必要はありません。次の優先度は編集部の判断で、caniemailやLitmusの結論ではありません。読めないと困る度合いと、後から見返される頻度で並べています。
| メールの種類 | 優先度 | 最低限やること | 理由 |
|---|---|---|---|
| 注文確認・領収書 | 高 | 配色ペアの確認、ロゴの縁取り、画像オフでの確認 | 後から見返され、金額や日付が読めないと問い合わせにつながる。 |
| パスワード再設定・認証コード | 高 | リンクとボタンのコントラスト、コードを画像にしない | 読めないと操作が止まる。 |
| 請求・支払期限の通知 | 高 | 色だけに頼らず「期限切れ」などの文言を併記 | WCAG 1.4.1。反転で色の意味が変わっても伝わる。 |
| ニュースレター | 中 | 純白・純黒を避ける、ボタンは中間色、ロゴは透過PNG | 配色が崩れても読めれば十分なことが多い。 |
| 画像中心のキャンペーン告知 | 中 | 本文テキストを別に用意し、alt属性に要点を書く | 画像オフとダークモードの両方で効く対策になる。 |
確認の進め方
- 実機で切り替える。iPhoneとMacのダークモードを有効にし、Apple Mail、Gmail、Outlookのアカウントにテストメールを送って、スマートフォンとデスクトップの両方で見ます。
- 反転を想定したチェックを行う。ライトとダークの両方で、本文、リンク、ボタンのコントラスト比を計算し、画像オフの状態でも主要な情報が読めるかを確認します。
- プレビューサービスは補助にする。LitmusやEmail on Acidはダークモードのプレビューを提供しますが、料金や1回あたりの表示数はプランによって異なります。契約前に各社の料金ページで確認してください。比較はLitmusとEmail on Acidの比較で扱っています。
- 結果を記録する。クライアント、モード、確認日、残った不具合を記録しておけば、次のテンプレート更新のときの出発点になります。
確認する項目は、次の表のとおりに整理しておくと、担当者が替わっても同じ基準で見られます。
| 項目 | 確認方法 | 合格の目安 |
|---|---|---|
| 宣言 | color-scheme の meta と :root の両方がある | iOSのメールでも反転が止まる／起こる意図が説明できる |
| ダーク用CSS | @media の中の宣言がすべて !important | インライン指定より優先される |
| Outlook.com／アプリ | [data-ogsc]、[data-ogsb] 版が重複して書かれている | 画像の差し替えとリンク色が効く |
| コントラスト | 各ペアを計算（ライトとダークの両方） | 通常文字 4.5:1 以上、大きな文字 3:1 以上 |
| ロゴ | 暗い背景に置いて目視、または差し替え版を用意 | 文字が背景に溶けない |
| 色だけの意味づけ | 赤・緑だけで状態を示していないか | 文言か記号が併記されている |
| 画像オフ | 画像を無効にして開く | 日付・金額・ボタンの文言が読める |
| Gmail | iOSアプリで実機確認 | 完全反転されても本文とボタンが読める |
| リンク色 | ライト用の #0a58ca をダークにそのまま使っていない | #7aa7ff など明るい色で 4.5:1 以上 |
| ボタンの文字色 | ボタンの背景を変えたら文字色も見直す | 例：#1a1a1a on #7aa7ff で 7.29:1 |
| プレビューテキスト | 受信一覧で表示されるテキストが画像だけになっていない | 本文の先頭に実テキストがある |
CSS全般の対応状況はメールのCSSガイド、レンダリングエンジンの違いはクライアント互換性ガイド、コントラストとaltテキストはアクセシビリティのガイドを参照してください。
よくある質問
prefers-color-scheme を書けば、Gmailのダークモードも制御できますか。
できません。caniemailの @media (prefers-color-scheme) のページでは、Gmail（ウェブ、iOS、Android）はすべて非対応です。Litmusの対応表でも、Gmailのアプリは自動反転で、iOSは完全反転、Androidは部分反転と整理されています。Gmailでは「反転されても読める配色にしておく」ことが唯一の現実的な対策です。
メタタグだけ入れて、ダーク用のCSSは書かなくても問題ありませんか。
避けたほうがよい組み合わせです。Litmusによると、Apple Mailはメタタグがなければ配色を変えませんが、メタタグを入れてダーク用のスタイルを書かない場合は部分的な反転が起こります。宣言は「自分でダーク対応のスタイルを用意した」という合図なので、入れるならダーク用のCSSとセットにします。
ダークモードを無効にして、ライトのまま表示させることはできますか。
Apple Mailに限っては可能です。WebKitの解説では、color-scheme に light only を指定するとMailは配色変換をしません。ほかのクライアントでは、メール側の指定にかかわらず自動反転されることがあるため、ブランドカラーが固定の場合は「反転されても成立する配色」と「主要クライアントでの確認」を併用するのが安全です。
どのメールからダークモード対応を始めればよいですか。
注文確認、パスワード再設定、請求書の通知のように、読み飛ばされると困るメールからです。キャンペーン告知は、背景を純白にせず、ボタンを中間色にして、ロゴに透過を残す程度の防御策から始めれば十分です。画像だけで構成された告知は、ダークモードに限らず画像オフ時にも読めないので、本文テキストを別に用意してください。