So verhindern Sie, dass der iOS 13 Dark Mode E-Mails beschädigt

10

Wir haben eine E-Commerce-App, die Bestelldetails sendet, wenn ein Kauf getätigt wird, und wir haben gerade diese E-Mail-Vorlage neu gestaltet. Wir haben in den letzten Tagen Berichte erhalten, wonach bei einigen Kunden die Hälfte des Textes in der E-Mail fehlt.

Nachdem wir endlich einen Screenshot erhalten haben, haben wir erfahren, dass das Problem auf iPhones im dunklen Modus auftritt. Bisher waren alle Kunden, die Google Mail entweder mit der Mail-App oder mit Safari verwenden (beide haben das gleiche Problem). Ich bin mir nicht sicher, ob der Google Mail-Faktor relevant oder ein Zufall ist.

Unsere E-Mail ist einfach - sie hat einen weißen Hintergrund, graue Überschriften und schwarzen Text. Im dunklen Modus bleiben der weiße Hintergrund und die grauen Überschriften unberührt, aber der Text wird von schwarz nach weiß geändert. Auf dem weißen Hintergrund ist der weiße Text offensichtlich unsichtbar, und in der E-Mail scheinen große Mengen an Inhalten zu fehlen.

Gibt es irgendetwas, das verhindert werden kann, dass der Dunkelmodus unseren Text von Schwarz nach Weiß ändert?

Ich sollte beachten, dass wir auch einen QR-Code in die E-Mail eingebettet haben. Daher mache ich mir Sorgen über Lösungen, die es dem Dunkelmodus ermöglichen, unsere vollständige E-Mail neu einzufärben, da ich glaube, dass dies die Erkennung des QR-Codes erschweren würde .

Bearbeiten: Dies hängt nicht mit App-Code zusammen, daher gelten keine Richtlinien zur Entwicklung von iOS für den Dunkelmodus. Dies ist lediglich ein Problem, wie Apples Mail-App unter iOS 13 im dunklen Modus eine HTML-E-Mail anzeigt.

ios css email gmail ios-darkmode jessica
quelle
Mögliches Duplikat von iOS13 White Color Problem mit textColor von UIKit
Pratik Sodha
Was passiert, wenn Sie die Farbe der Schriftart explizit festlegen? Ich gehe davon aus, dass der Dunkelmodus die Schriftart nur dann in Weiß ändert, wenn die Standardfarbe beibehalten wird.
Frank Schlegel
2
Siehe auch
Frank Schlegel
@PratikSodha Diese Frage bezieht sich auf iOS-Apps. Ich spreche lediglich von einer HTML-E-Mail, die in Apples Mail-App im dunklen Modus angezeigt wird.
Jessica
@FrankSchlegel Die Farbe und Hintergrundfarbe wurde explizit überall festgelegt und wurde immer noch verschoben. Der von Ihnen angegebene Link hatte die Antwort, ich musste color-scheme: light onlyalle Elemente festlegen . Ich danke dir sehr.
Jessica

Antworten:

10

Sie können dies auf Apple-Geräten zwangsweise entfernen, aber jetzt haben wir Google Mail und Outlook auf dem Mac, ohne dass Sie sie stoppen können.

Setzen Sie dies einfach in die <head>:

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

"Nur" ist die Abkürzung für "Nur Licht" (was auch noch funktioniert)

Dies behebt den iPhone-Dunkelmodus und Apple Mail, jedoch nicht Outlook auf Mac oder Google Mail.

Sie können Outlook derzeit auf dem Mac überschreiben, es ist jedoch kein Hack für Google Mail bekannt.

So überschreiben Sie Outlook auf dem Mac:

<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 an Brian Thies im Lackmus-Forum dafür

Versuchen Sie jedoch am besten, das Root-Problem zu beheben, anstatt eine von Ihren Kunden gewünschte Funktionalität (dunkler Modus) zu entfernen.

Apple hat so etwas bereitgestellt, mit dem in <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>

Stellen Sie außerdem sicher, dass Ihr äußerstes Element mit der Hintergrundfarbe die Klasse "Dunkelmodus" hat, z

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

Standardmäßig haben Sie also weißen Hintergrund und schwarzen Text. und im dunklen Modus ist es ein dunkler Hintergrund mit hellem Text.

(Bitte geben Sie den Code für weitere Fragen an.)

Nathan
quelle