デフォルトのテーマを使用しており、テーマコンポーネントやCSSのカスタマイズは行っていません。設定では、ダイジェストメール用に白い「ダークモード」ロゴを指定しています。これは、ダイジェストのロゴ背景領域が暗いためです。通常はきれいに表示されます。
しかし、iPhoneのGmailアプリでデバイスのダークモードでダイジェストを受信すると、ロゴの背景領域が白（っぽい）に反転し、ロゴがほとんど見えなくなります。
デスクトップでは、Chromeインスペクターを使用してダークモードのプレビューができます。ロゴの背景色は白に反転しません。しかし、デフォルトの（ライトモードの）ロゴに切り替わり、そちらがほとんど見えなくなります。
これは非常に混乱しています。バグなのか、それともモバイルダークモードの動作に関する私の期待が間違っているのかわかりません。
デフォルトのロゴに黒い縁取りを追加すれば、明るい背景でもよりよく機能するかもしれません。
しかし、すべての設定で機能するダイジェストのロゴと背景の組み合わせを適切に実現するためのヒントがあれば、歓迎します。
確認ですが、管理 / カスタマイズ / メールスタイルにあるDiscourseのHTMLメールテンプレートに何か変更を加えましたか？また、そのページにあるCSSタブにCSSを追加しましたか？
また、サイト設定の「ダイジェストにカスタムスタイルを適用する」はサイトで有効になっていますか？この設定はデフォルトで有効になっています。
加えたカスタマイズが問題の原因ではないと仮定すると、おそらくデフォルトのDiscourseメールテンプレートにある%{dark_mode_styles}プレースホルダーが、この方法で追加されたCSSに置き換えられているのでしょう。
このメソッドはテンプレートに以下のCSSを追加します。
[dm='header'] {
background: #151515 !important;
}
このCSSは、デバイスがダークモードに設定されている場合にメールのダイジェストヘッダーを暗くすることを意図していますが、一部のデバイスでは!importantディレクティブを無視して、色の反転を表示しているのかもしれません。
Androidスマートフォンではこの問題を再現できませんでした。iPhoneを持っていないのでテストできません。誰かiPhoneでダークモードでダイジェストメールを表示できる人はいますか？
サイモン様 – ご返信ありがとうございます。
メールテンプレートのカスタムHTMLやCSSには一切触れていません。apply custom styles to digest を無効にしましたが、予想通り効果はありませんでした。
もしどなたかがアドレスを投稿またはDMで送ってくだされば、要約メールをお送りできます。
メールがサイトから送信され、AndroidフォンのGmailアプリのダークモードで正しく表示されています。iOSデバイスがないため、テストできません。
@ToddZのiOSデバイスでは、「ダイジェストにカスタムスタイルを適用」設定が有効になっているかどうかにかかわらず、同じ結果が得られます。
iOSのGmailアプリはまだprefers-color-schemeメディアクエリをサポートしていないと推測します。https://www.caniemail.com/features/css-at-media-prefers-color-scheme/。このページにはAndroidもサポートしていないと記載されていますが、私の場合、AndroidのGmailではメールが正しくレンダリングされています。
関連することですが、「ダイジェストにカスタムスタイルを適用」設定を有効にしないと、メールテンプレートに追加されたダークモードCSSが適用されないことをどこかに記載しておく価値があるかもしれません。
@isaac、まだ対応中かどうか分かりませんが、GmailのiOSでの処理方法をテストする価値があるかもしれません。特にDiscourseサイトのデフォルトテーマがダークカラースキームを使用している場合。
興味深いことに、Windowsで招待メールに似たような問題に気づきました。
（ただし、iOSでは問題なく表示されます。）
これはWin11 22H2で、Thunderbirdはシステムテーマを使用しています（OSのライト/ダーク設定を使用）。
Windowsのダークモード：
（ライトモードは問題なく表示されます。）
もし可能であれば、apply custom styles to digest のサイト設定を有効にした状態で、同じメールをトリガーしてみてください。その設定は、Thunderbird のダークモードでのメールの表示方法に違いをもたらしますか？
また、Admin / Customize / Email Style にあるメールテンプレートが編集されていないことを再度確認していただけますか？編集されていない場合、そのページの「リセット」ボタンは無効になります。
私が知りたいのは、上記のスクリーンショットでハイライトした dark_mode_meta_tags と dark_mode_styles のキーがテンプレートに存在するかどうかです。
はい、確認しました。
apply custom styles to digest：オンにしてもオフにしても違いはありません。この問題の原因は、こちらの投稿の「Default Dark Modes: full color invert」セクションに記載されていると考えられます: Dark Mode Email: Your Ultimate How-to Guide - Litmus.
フルカラー反転は最も侵襲的な配色です。背景が明るい領域を反転させるだけでなく、暗い背景にも影響します。
そのため、すでにメールをダークテーマ用にデザインしている場合、このスキームは皮肉にもライトテーマに変更してしまいます。残念ながら、これは現在、Gmailアプリ（iOS）、Outlook 2021（Windows）、Office 365（Windows）、Windows Mailなど、いくつかの人気のあるメールクライアントで使用されている戦術です。
投稿のこの問題の例は、あなたが報告しているものと一致します。
DiscourseのLitmusアカウントにアクセスできる人がテストする必要があります。問題を再現するには、デフォルトテーマのカラーパレットがダークカラー スキームに設定されているDiscourseサイトから、Litmusにダイジェストメールを送信してみてください。
それが問題を引き起こすと仮定すると、簡単な修正は、Discourseのデフォルトテーマに割り当てられているカラーパレットに関係なく、常にメールにライトカラー スキームを使用することです。また、私がリンクした投稿の「Gmail iOS & Outlook Windows-specific targeting」セクションで提案されているアプローチも、おそらく機能する可能性があります。ただし、それは少しハックです。
これを調査する人は、実際にダークモードをサポートするメールクライアントのダークモードサポートを追加するために、現在 apply custom styles to digest サイト設定を有効にする必要がある方法も確認するかもしれません。Discourse UIには、この設定がダークモードサポートに関連していることを明確にするものは何もありません。
はい、フルカラー反転は、少なくともiOS Gmailのダイジェスト/概要で私が目にしているもののように見えます。
今すぐその記事全体を解析して適切な回避策を見つけるだけの余裕はありませんが、最終的には試さなければなりません。Gmailの例を投稿するためのGitHubスレッドは2019年から公開されており、多くの回避策が提案されていますが、根本的な動作が変更される兆候はありません。
Discourseチームが、プラットフォーム間で外観を統一するための一般的な調整を行うことができることを願っています。
サイトから見たダイジェストメールに基づくと、サイトのデフォルトの配色がダークテーマであると想定されます。その場合、以下のコードをサイトの管理画面 / カスタマイズ / メールスタイル / CSSタブに追加することで、iOS Gmailアプリで発生しているヘッダー背景色の問題を修正できます。
.digest-header {
background-image: linear-gradient(#111, #111);
}
linear-gradientに追加する色は両方とも同じである必要があります。デフォルトテーマのカラーパレットの「ヘッダー背景」の色設定値と一致させる必要があります。
これは、デフォルトでダークカラーの配色が設定されているサイトにのみ適したアプローチだと思います。なぜこれが機能するかの詳細は、こちらで確認できます: https://meta.discourse.org/t/investigating-activity-summary-email-dark-mode-issues/282272。
