アクティビティサマリーメールのダークモードの問題を調査中

[simon]

これは、いくつかの画像と簡単に適用できるソリューションを備えた短い投稿になるはずでした。しかし、手に負えなくなりました。HTMLメールは難しいです。面白半分に、これがどのようにうまくいかなくなるかを見てみましょう： Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub

この投稿を自由に読み飛ばし、画像を見てください。投稿の終わりまでに、ダークモードの人気のため、現在のコードにハックされたソリューションを追加しようとするのではなく、ダイジェストメールを再構築する価値があるかもしれないという結論に至っていました。それは私次第ではありませんし、おそらく私はこれに長すぎただけかもしれません。

---

ダークモードに設定されたメールクライアントでダイジェストメールがどのようにレンダリングされるかについて、最近の質問がありました。主な問題は、ダークモードを完全な色の反転で処理するメールクライアント（Gmailアプリ（iOS）、Outlook 2021（Windows）、Office 365（Windows）、Windows Mail）で、ダイジェストヘッダーの背景色が反転することです。これにより、ヘッダーの色とサイトのロゴの間にコントラストの問題が生じます。

これらのメールクライアントは、ボタンのテキストの色と、ダイジェストの「前回訪問以降」セクションにも問題を抱えています。

以下のすべての画像は、Litmusメールテストサービスからのものです：

ダークカラースキームのDiscourseサイトから、透明な背景を持つ白いPNGロゴを使用しています：

期待通り（Gmailアプリ ダークモード for Android）：

悪い（Gmail ダークモード for iOS、OL Office 365 ダークモード、Outlook 2021 ダークモード、Windows 10 Mail ダークモード）：

モバイルクライアントの概要（Gmail for iOSは、ヘッダーの色に明らかな問題がある唯一のクライアントです）：

ここでは、Metaダイジェストメール（デフォルトのライトカラースキーム、透明な背景のダークPNGロゴ）で同じテストを行います。Metaでは、「ダイジェストにカスタムスタイルを適用する」サイト設定が有効になっていないため、サポートしているクライアント（Apple Mailおよび最近のバージョンのiOS Mail）用のダークモードメタタグとスタイルを取得していません。apply custom styles to digest設定が有効になっていれば、iPhoneのダークモードテストでもロゴ/背景色のコントラストに問題が生じるのではないかと推測します。

メールヘッダーの背景色をサイトのデフォルトカラースキームの色に一致させるように強制するには、いくつかの方法があります：

Gmailアプリ for iOSの場合、ヘッダーの背景色は、linear-gradientで作成された背景画像で設定できます。このように作成された背景画像は、色が反転しません。トリックは、linear-gradientの両方の色をDiscourseサイトのデフォルトカラースキームの「ヘッダー背景」色の値に設定することです。

これは、管理 / カスタマイズ / メールスタイル / CSSタブにカスタムCSSを追加することで実現できます。色値をデフォルトカラースキームの「ヘッダー背景」色の値に設定します。（注：メールCSSエディタで色を設定するためにvar(--header_background)を使用することはできません）：

.digest-header {
    background-image: linear-gradient(#111, #111);
}

Metaダイジェストメールでこのアプローチをテストしましたが、デフォルトのカラースキームがライトのサイトのソリューションとしては、疑問を感じ始めています。ロゴは読みやすいですが、これは少し奇妙に見えませんか？

Outlook 2021 DarkおよびWindows 10 Mail Darkデスクトップメールクライアントの場合、ヘッダーの背景色の反転の問題は、.digest-headerに設定されているbackground-colorに!importantルールを追加することで修正できます。これはカスタムCSSでは実現できません。Discourseはすでに!importantルールなしで要素にbackground-colorスタイルを追加しており、そのルールはカスタムCSSの後に追加されるため、優先されます。（注：このアプローチは、背景色をダークカラーに強制する場合にのみ機能するようです。ヘッダーの背景を#ffffffに強制しようとすると失敗します。）

フルカラー反転を実行するメールクライアントでの「前回訪問以降」セクションのテキスト色の問題には、簡単な解決策はないようです。iOS Gmailのハックがここで提案されています：https://www.hteumeuleu.com/2021/fixing-gmail-dark-mode-css-blend-modes/。これは、ブレンドモードを使用してGmailを騙し、白いテキスト色を設定させます。理論上は機能しますが、ダイジェストメールのマークアップの複雑さを考えると、追求する価値はないと思います。

要約すると、デフォルトのカラースキームがダークのDiscourseサイトの場合、現時点での良い解決策は、上記のCSSをメールスタイル/ CSSタブに追加することだと思います。これにより、iOS Gmailダークモードアプリでサイトのロゴが読みやすくなります。追加しても、テストした他のメールクライアントに問題は発生していません。デフォルトのカラースキームがライトのサイトの場合、そのアプローチについてはあまり確信が持てません。それ以外はダークな画面に白いヘッダー背景を強制しても、見た目はあまり良くありません。

ダイジェストメールは、ダークモードが一般的に使用される前に開発されました。おそらく、ダークモードの人気が高まっているため、人気のあるメールクライアントでダークモードとライトモードの両方でうまく表示されるように、ダイジェストメールを再構築することが理にかなっているでしょう。

ダイジェストメールの完全な再構築が範囲外である場合、dark_mode_digest_logoおよびlight_mode_digest_logo設定を提供することを検討する価値があるかもしれません。少なくとも一部のメールクライアントでは、モードを検出して適切なロゴを表示することが可能になります。

Outlookデスクトップクライアントでのダークモードを改善するために、DiscourseはメールのHTMLからすべてのクラス名を削除するのではなく、いくつかのクラス名を残しておくことができます。これらのクラス名は、Outlookでダークモードをターゲットするために使用できます：https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402。（注：Outlookは要素の複数のクラス名を処理できないため、`digest.html.erb`ファイルからいくつかのクラス名を削除する必要があります。）

[simon]

デフォルトで apply custom styles to digest (ダイジェストにカスタムスタイルを適用) のサイト設定が有効になっているという、最も明白な問題を十分に明確に伝えられていなかったことに気づきました。この設定は、ユーザーがデバイスでダークモードを有効にしている場合に、iOSのメールクライアントがメールをダークモードで表示させるためのメタタグやCSSルールを追加するために使用されます。

ダイジェストのロゴを、ライトとダークの両方の背景に対して十分なコントラストを持つようにアップロードする特別な注意を払わない限り、ライトの背景用に最適化されたロゴを持つサイトからのダイジェストメールは、ダークモードで一般的なメールクライアントで表示されると、次のようになります。

apply custom styles to digest のサイト設定を無効にすると、実際にはより良い結果が得られます。この設定が無効になっていると、ダークモードのスタイルはiOSのメールアプリには適用されません。ただし、AndroidのメールクライアントやiOSのGmailアプリには引き続き適用されます。

おそらく、現在のベストプラクティスは、ライトとダークの両方の背景に対してうまく表示されるロゴを digest logo (ダイジェストロゴ) のサイト設定にアップロードしようとすることでしょう。それができない場合は、ライトのデフォルトのカラースキームを持つDiscourseサイトは apply custom styles to digest のサイト設定を無効にすべきです。ダークのデフォルトのカラースキームを持つDiscourseサイトは、この設定を有効にしたままにしておくべきです。 apply custom styles to digest のサイト設定に関するアドバイスは、まだ決定的なものではありませんが、いくつかのテストに基づくと、正しいアプローチである可能性が高いと思われます。

@simon

dark_mode_digest_logo と light_mode_digest_logo の設定を提供するように調査する価値があるかもしれません。少なくとも一部のメールクライアントでは、モードを検出し、適切なロゴを表示することが可能になります。

これは、@media (prefers-color-scheme) をサポートするメールクライアントでのみ機能します: https://www.caniemail.com/features/css-at-media-prefers-color-scheme/。他のメールクライアントでは、両方のバージョンのロゴが表示されるリスクがあります。

[Canapin (Coin-coin le Canapin)]

サイモン、この徹底的な作業をありがとうございます

@simon

The main issue is that the digest header’s background color gets inverted on email client that handle dark mode by performing a full color invert

ひどいですね。スマートフォンでこれに遭遇しますが、コンテンツに関係なく強制的に色を反転させることが良いアイデアだとは思えません。

[jordan.vidrine]

ロゴの代わりに、サイトのロゴとサイトで現在使用されているヘッダーの背景色を使用した長方形の画像を作成するという解決策はどうでしょうか。

これはバックエンドで行う必要がありますが、背景として含まれる色を持つ画像ブロックを使用することで、Gmailが背景色を反転させるのを防ぐことができます。

参考までに、ダークモードに設定したGmailアプリで複数の大手ブランドのメールをテストしましたが、そのほとんどがこの問題を解決していませんでした。

[simon]

@jordan.vidrine

ロゴを使用する代わりに、サイトのロゴとサイトが現在使用しているヘッダーの背景色を使用した長方形の画像を作成するという解決策は可能でしょうか。

それを実行しなくても、ほとんどのメールクライアントで特定の背景色を強制することは可能です。例外は、古いOutlookデスクトップメールクライアントの一部であるようです。（デスクトップクライアントではダークモードはそれほど使用されていないと推測します。）

iOS（Gmailを除く）のメールクライアントでは、apply custom styles to digest設定が有効になっている場合、Discourseはすでにこれを実行しています。問題は、背景色をハードコーディングしており、サイトの「ヘッダーの背景色」を尊重していないことです。

app/helpers/email_helper.rb

[dm='header']ルールを次のように変更できます。

""
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
""

もし適切であれば、同様のアプローチを「前回のご訪問以降」セクションにも適用できます。

""
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
""

ダークモードのスタイル用のdm属性が、ここでメールに追加されることに注意してください。discourse/lib/email/styles.rb at main · discourse/discourse · GitHub

そのようなものであれば、iOS（Gmailを除く）のメールクライアントの問題を修正できるはずです。

iOSのGmailクライアントの場合、線形グラデーションを使用して背景色を強制できます。この方法で線形グラデーションの背景を設定しても、すべてのメールクライアントで意図しない副作用はないようです。したがって、すべてのメールクライアントに送信されるインラインCSSに線形グラデーションの背景色を追加しても問題ないはずです。

「前回のご訪問以降」セクションを処理する最も簡単な解決策は、クライアントに完全な色反転を実行させることですが、email accent accent bg colorとemail accent fg colorの設定間に十分なコントラストがあることを確認することだと思います。

これにより、次のようなケース（これらの設定のデフォルト値を使用した場合）を防ぐことができます。

[simon]

Discourse が現在、要約メールがダークモードで正しく表示される可能性を高めるために行うことができる最も簡単な変更は、apply custom styles to digest（ダイジェストにカスタムスタイルを適用する）サイト設定をデフォルトで有効にしないことです。（注：これは iOS のメールクライアントにのみ影響します。）

もう 1 つの小さな変更は、digest logo（ダイジェストロゴ）サイト設定のコピーを更新して、ライトまたはダークの背景色のどちらに対しても十分なコントラストを持つロゴをアップロードするように促すことです。ダークロゴの定番のトリックは、ロゴに白いアウトラインを追加することです。

おそらく、Emails / Preview summary（メール / 要約プレビュー）ページには、一部のメールクライアントがメールをダークモードで表示する際に「フルカラー反転」を実行するという警告を表示すべきです。サイトオーナーは、アクセス可能なメールクライアントで要約メールをダークモードでテストするように促される可能性があります。

[damienalexandre]

詳細をありがとうございます！

簡単な回避策として、メール設定に次のCSSを追加しました。

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

これにより、ヘッダーの背景が明るくなり、ロゴが正しく表示されるようになりました（少なくともプレビューでは）。