web-dev-qa-db-ja.com

iOS 13のダークモードがメールを壊すのを防ぐ方法

購入時に注文の詳細を送信するeコマースアプリがあり、そのメールテンプレートを再設計しました。過去数日間、一部のお客様がメールのテキストの半分が欠落しているという報告を受けました。

最終的にスクリーンショットを取得した後、ダークモードを使用しているiPhoneで問題が発生していることがわかりました。これまでのところ、彼らはすべて、MailアプリまたはSafariでgmailを使用している顧客でした（両方とも同じ問題があります）。 Gmailの要素が関連しているか、偶然かはわかりません。

私たちのメールはシンプルです。背景は白、見出しは灰色、本文は黒です。ダークモードでは、白い背景と灰色の見出しは変更されませんが、本文のテキストが黒から白に変更されます。白い背景では、白いテキストは明らかに見えず、メールには大量のコンテンツが欠落しているように見えます。

ダークモードによってテキストが黒から白に変わるのを防ぐためにできることはありますか？

メールにQRコードが埋め込まれていることにも注意してください。QRコードが認識されにくくなるため、ダークモードでメール全体の色を変更できる解決策が心配です。 。

編集：これはアプリのコードとは関係がないため、ダークモード用のiOSの開発に関するガイドラインは適用されません。これは、iOS 13のAppleのメールアプリがダークモードでHTMLメールを表示する方法の問題です。

ioscssemailgmailios-darkmode
10
jessica

@FrankSchlegelによって提供されたリンクのおかげで

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

すべての要素のcssでcolor-scheme: light onlyを使用することが答えでした。ありがとうございました！

3
jessica

これはAppleデバイスで強制的に削除できますが、GmailとOutlookをMacで停止する方法はありません。

これを<head>：

<meta name="color-scheme" content="only">

「Only」は「Light only」の略です（これも引き続き機能します）

これにより、iPhoneのダークモードとAppleメールは修正されますが、は修正されませんOutlook on MacまたはGmail）。

現在、Mac上のOutlookを上書きできますが、Gmailに対する既知のハックはありません。

Mac上のOutlookを上書きする方法は次のとおりです。

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HTに このためのLitmusフォーラムのBrian Thies

ただし、顧客が望む機能（ダークモード）を削除するのではなく、根本的な問題を解決することをお勧めします。

Appleはそのような方法を提供しており、これは<head>：

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

また、background-colorを持つ最も外側の要素にクラス「darkmode」があることを確認してください。

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

したがって、デフォルトでは、背景は白、テキストは黒になります。暗いモードでは、明るいテキストの暗い背景になります。

（それ以上のクエリにはコードを入力してください。）

8
Nathan