Как предотвратить нарушение электронной почты в темном режиме iOS 13

У нас есть приложение для электронной коммерции, которое отправляет сведения о заказе при совершении покупки, и мы только что переработали этот шаблон электронной почты. За последние несколько дней мы получили сообщения о том, что у некоторых клиентов пропала половина текста в электронном письме.

Получив, наконец, снимок экрана, мы узнали, что проблема возникает на iPhone в темном режиме. До сих пор все они были клиентами, использующими Gmail либо с почтовым приложением, либо с Safari (у обоих одна и та же проблема). Я не уверен, имеет ли значение фактор Gmail или совпадение.

Наше электронное письмо простое - у него белый фон, серые заголовки и черный основной текст. В темном режиме белый фон и серые заголовки остаются нетронутыми, но основной текст изменяется с черного на белый. На белом фоне белый текст явно невидим, и в электронном письме похоже, что в нем не хватает большого количества контента.

Есть ли что-нибудь, что можно сделать, чтобы темный режим не изменил наш текст с черного на белый?

Я должен отметить, что у нас также есть QR-код, встроенный в электронное письмо, поэтому меня беспокоят решения, которые позволят темному режиму продолжить перекрашивать нашу полную электронную почту, поскольку я считаю, что это затруднит распознавание QR-кода. .

Изменить: это не связано с каким-либо кодом приложения, поэтому рекомендации по разработке iOS для темного режима не применяются. Это просто проблема того, как приложение Apple Mail на iOS 13 в темном режиме отображает электронное письмо в формате HTML.


ios gmail ios-darkmode css email
person jessica    schedule 01.10.2019    source источник
comment
Возможный дубликат проблемы белого цвета iOS13 с textColor UIKit   -  person Pratik Sodha    schedule 01.10.2019
comment
Что произойдет, если вы явно укажете цвет шрифта? Я предполагаю, что темный режим меняет шрифт на белый, только если он оставлен с цветом по умолчанию.   -  person Frank Schlegel    schedule 01.10.2019
comment
По теме: webkit.org/blog/8840/dark-mode-support -in-webkit   -  person Frank Schlegel    schedule 01.10.2019
comment
@PratikSodha, этот вопрос относится к приложениям для iOS, я просто говорю о HTML-письме, отображаемом в приложении Apple Mail в темном режиме.   -  person jessica    schedule 03.10.2019
comment
@FrankSchlegel цвет и цвет фона везде были явно заданы и все еще менялись. В предоставленной вами ссылке был ответ, мне пришлось установить color-scheme: light only для всех элементов. Большое спасибо.   -  person jessica    schedule 03.10.2019

Ответы (2)


arrow_upward
26
arrow_downward

Вы можете принудительно удалить это на устройствах Apple, но теперь у нас есть Gmail и Outlook на Mac, и их невозможно остановить.

Просто поместите это в <head>:

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

«Only» - это сокращение от «Light only» (что тоже работает).

Это исправит темный режим iPhone и Apple Mail, но не Outlook на Mac или Gmail.

В настоящее время вы можете переопределить Outlook на Mac, но известных способов взлома Gmail нет.

Вот как переопределить Outlook на 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 на Брайан Тис на форуме Litmus по этому поводу

Но лучше попытаться устранить основную проблему, а не удалять функциональные возможности (темный режим), которые нужны вашим клиентам.

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

Так что по умолчанию у вас будет белый фон, черный текст; а в темном режиме это будет темный фон со светлым текстом.

(Пожалуйста, предоставьте код для дальнейших запросов.)

person Nathan    schedule 11.11.2019

arrow_upward
10
arrow_downward

Благодаря ссылке, предоставленной @FrankSchlegel

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

использование color-scheme: light only в CSS для всех элементов было ответом. Спасибо!

person jessica    schedule 03.10.2019