Jak zapobiec łamaniu wiadomości e-mail w trybie iOS 13 Dark Mode

Mamy aplikację e-commerce, która wysyła szczegóły zamówienia po dokonaniu zakupu, i właśnie przeprojektowaliśmy ten szablon e-maila. W ciągu ostatnich kilku dni otrzymywaliśmy raporty, w których brakowało połowy tekstu w e-mailu.

Po otrzymaniu zrzutu ekranu dowiedzieliśmy się, że problem występuje na iPhone'ach korzystających z trybu ciemnego. Do tej pory wszyscy byli klientami korzystającymi z Gmaila z aplikacją Mail lub Safari (oba mają ten sam problem). Nie jestem pewien, czy czynnik gmail jest istotny, czy przypadek.

Nasz e-mail jest prosty - ma białe tło, szare nagłówki i czarny tekst. Tryb ciemny pozostawia nietknięte białe tło i szare nagłówki, ale tekst podstawowy zmienia się z czarnego na biały. Na białym tle biały tekst jest oczywiście niewidoczny, a wiadomość e-mail wygląda, jakby brakowało dużej ilości treści.

Czy można coś zrobić, aby tryb ciemny nie zmienił tekstu z czarnego na biały?

Powinienem zauważyć, że mamy również kod QR osadzony w wiadomości e-mail, więc martwię się o rozwiązania, które pozwoliłyby ciemnemu trybowi na kontynuowanie zmiany koloru naszej pełnej wiadomości e-mail, ponieważ uważam, że utrudni to rozpoznanie kodu QR .

Edycja: nie jest to związane z żadnym kodem aplikacji, więc wytyczne dotyczące programowania systemu iOS dla trybu ciemnego nie mają zastosowania. Jest to po prostu kwestia tego, jak aplikacja Apple Mail na iOS 13 w trybie ciemnym wyświetla e-mail HTML.

— Jessica
źródło

Możliwy duplikat problemu iOS 13 Biały kolor z tekstem Kolor UIKit

— Pratik Sodha

Co się stanie, jeśli wyraźnie ustawisz kolor czcionki? Zakładam, że tryb ciemny zmienia czcionkę na białą tylko wtedy, gdy pozostanie z domyślnym kolorem.

— Frank Schlegel

Powiązane: webkit.org/blog/8840/dark-mode-support-in-webkit

— Frank Schlegel

@PratikSodha to pytanie dotyczy aplikacji na iOS, mówię po prostu o e-mailu HTML wyświetlanym w aplikacji Apple Mail w trybie ciemnym.

— jessica

@FrankSchlegel kolor i kolor tła został wyraźnie ustawiony wszędzie i wciąż był zmieniany. Podany link miał odpowiedź, musiałem ustawić color-scheme: light onlywszystkie elementy. Dziękuję bardzo.

— jessica

Odpowiedzi:

Możesz wymusić to usunięcie na urządzeniach Apple, ale teraz mamy Gmaila i Outlooka na Macu bez możliwości ich zatrzymania.

Po prostu umieść to w <head>:

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

„Tylko” jest skrótem od „Tylko światło” (które nadal działa)

To naprawi ciemny tryb iPhone'a i Apple Mail, ale nie Outlook na Macu lub Gmailu.

Obecnie możesz zastąpić program Outlook na komputerze Mac, ale Gmail nie jest znany.

Oto jak zastąpić program Outlook na komputerze 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 do Briana Thiesa na forum Litmus

Ale najlepiej spróbować rozwiązać problem root, zamiast usuwać funkcje (tryb ciemny), których oczekują Twoi klienci.

Apple zapewniło taki sposób, dzięki <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>

Upewnij się również, że twój najbardziej zewnętrzny element z kolorem tła ma klasę „darkmode”, np

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

Tak więc domyślnie będziesz mieć białe tło, czarny tekst; w trybie ciemnym będzie to ciemne tło z jasnym tekstem.

(Proszę podać kod dla dalszych zapytań.)

— Nathan
źródło

Dzięki linkowi dostarczonemu przez @FrankSchlegel

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

odpowiedzią było użycie color-scheme: light onlyw css wszystkich elementów. Dziękuję Ci!

— Jessica
źródło