Как предотвратить взлом электронной почты в iOS 13 Dark Mode

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

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

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

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

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

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

— Джессика
источник

Возможный дубликат выпуска iOS13 белого цвета с TextColor из UIKit

— Pratik Sodha

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

— Фрэнк Шлегель

Связанный: webkit.org/blog/8840/dark-mode-support-in-webkit

— Фрэнк Шлегель

@PratikSodha этот вопрос относится к приложениям для iOS, я просто говорю об электронной почте в формате HTML, отображаемой в приложении Apple Mail в темном режиме.

— джессика

@FrankSchlegel color и background-color были заданы явно везде и все еще менялись. Ссылка, которую вы предоставили, содержала ответ, который я должен был установить color-scheme: light onlyдля всех элементов. Огромное спасибо.

— джессика

Ответы:

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

Проще говоря это в <head>:

<meta name="color-scheme" content="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;">

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

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

— Натан
источник

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

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

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

— Джессика
источник