メールクライアントにおけるダークモードの上書きスタイルへの対応は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは機能しません。この点に注意し、プログレッシブエンハンスメントを意識してメールをデザインしてください。
動画チュートリアル：HTMLメールのデザインにダークモードのスタイルを追加する
この動画では、Emailifyプラグインを使ってメールデザインにダークモードのカスタム上書きスタイルを追加し、本番用のレスポンシブなHTMLメールをFigmaからエクスポートする方法を解説します。
ダークモードのデザインで考慮すべき重要な点
メールクライアントにおけるダークモードの上書きスタイルへの対応は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは機能しません。この点に注意し、プログレッシブエンハンスメントを意識してメールをデザインしてください。
メールクライアントごとに実装が異なるため、ダークモードに合わせたデザインは非常に難しいものです。それでも、各メールクライアントがダークモードで自動的に適用する（多くの場合ひどい）変更に逆らわず、うまく付き合うようにデザインする価値はあります。
最初の手がかりとして、メールクライアントが具体的に何を変更しているのか、そしてデザイン上でその変更の影響をどう抑えるのかを解説した資料（CampaignMonitorやLitmusの記事など）に目を通しておくことをおすすめします。
ダークモードのカラー上書きを適用する
テキストレイヤー、画像、Button、Row、Column、Wrapperなどの要素を選択し、プラグインのヘッダーにあるSettingsボタンをクリックします。Settingsパネルの下部にあるDark Mode Overridesセクションで、ダークモードのテキスト色と背景色を設定できます。
Button、Row、Column、Wrapperレイヤーでは、Border Colorの上書きも設定できます。ライトモードで使っている枠線の太さやスタイルはそのままに、ダークモードでの枠線の色だけを変更できます。
これらの上書き設定は、ダークモードが有効なデバイスでメールを表示したときに、この機能に対応しているメールクライアント（iOS・MacOSのApple Mailアプリ）で反映されます。
メールクライアントにおけるダークモードの上書きスタイルへの対応は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは機能しません。この点に注意し、プログレッシブエンハンスメントを意識してメールをデザインしてください。
ダークモードとライトモードで2つの画像レイヤーを切り替える
特定の画像レイヤーをダークモードで差し替えることもできます。Figmaのコンテンツレイヤー（Columnレイヤー内にあるもの）をクリックし、プラグインのヘッダーにあるSettingsボタンをクリックして、Only Hide in Dark ModeまたはOnly Show in Dark Modeのトグルを有効にします。どちらを選ぶかは、ダークモードが有効なデバイスでメールを表示したときに、この機能に対応しているメールクライアント（iOS・MacOSのApple Mailアプリ）でその画像レイヤーを表示したいか、非表示にしたいかによります。
メールクライアントにおけるダークモードの上書きスタイルへの対応は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは機能しません。この点に注意し、プログレッシブエンハンスメントを意識してメールをデザインしてください。
プラグインでダークモードをプレビューする
Previewを開き、HTML PreviewのツールバーにあるDark Modeスイッチをオンにします。同じダークモードのデザインをデスクトップとモバイルの幅で比較したい場合は、引き続きプレビュー幅のセレクターを使えます。Desktop & Mobileを組み合わせたHybridビューを選択している間は、Dark Modeは使えません。
ローカルのプレビューでは、汎用的な自動ダークモード処理を使い、メールのprefers-color-schemeスタイルを有効にします。色の調整はあくまで大まかな目安で、特定のメールクライアントを想定したものではありません。メールにEmailifyのダークモード上書き設定が含まれている場合は、隣にあるOverridesスイッチで、明示的に指定した背景、テキスト、枠線、画像の切り替えのスタイルを表示・非表示にできます。
このトグルはデザインの補助ツールであり、クライアントやデバイスのエミュレーターではありません。認証済みの環境でのサニタイズ処理、ネイティブのレンダリングエンジンやフォント、アプリの画面構成、配信時の処理、クライアントやバージョンごとのすべての違いは再現されません。
ダークモードでメールをテストする
動画チュートリアル：FigmaからエクスポートしたHTMLメールをダークモードでテストする
この動画では、EmailifyプラグインとLitmus.comを使って、FigmaからエクスポートしたHTMLメールをダークモードでテストする方法を解説します。
送信する前に、LitmusやEmail on Acidなどのサービスを使って自分でメールをテストし、きちんと表示されることを確認しておくことを常におすすめします。
メールクライアントにおけるダークモードの上書きスタイルへの対応は、iOS・MacOSのApple Mailに限られます。そのため、ダークモードの上書き設定はGmail、Outlookなどのほかのクライアントでは機能しません。この点に注意し、プログレッシブエンハンスメントを意識してメールをデザインしてください。
Settingsを開いてから、Figmaで同じ種類のEmailifyレイヤーを複数選択すると、設定を一括で適用できます。変更した設定は、選択したすべてのレイヤーに適用されます。