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

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

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

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

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

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

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

— ジェシカ
ソース

UIKitのtextColor

— Pratik Sodha

フォントの色を明示的に設定するとどうなりますか？ダークモードでは、フォントがデフォルトの色のままになっている場合にのみ、フォントが白に変更されると思います。

— フランクシュレーゲル

関連：webkit.org/blog/8840/dark-mode-support-in-webkit

— フランクシュレーゲル

@PratikSodhaその質問はiOSアプリに関するもので、私は単にダークモードのAppleのメールアプリに表示されるHTMLメールについて話しているだけです。

— ジェシカ

@FrankSchlegel色と背景色はどこにでも明示的に設定され、まだシフトされていました。あなたが提供したリンクには答えがあり、私はcolor-scheme: light onlyすべての要素を設定しなければなりませんでした。どうもありがとうございます。

— ジェシカ

回答:

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

これを単にに入れて<head>ください：

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

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

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

現在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>

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

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

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;">

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

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

— ネイサン
ソース

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

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

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

— ジェシカ
ソース