Як не допустити iOS 13 Dark Mode від порушення електронної пошти

У нас є додаток для електронної комерції, який надсилає деталі замовлення під час здійснення покупки, і ми просто переробили цей шаблон електронної пошти. За останні кілька днів ми отримували повідомлення про те, що деякі клієнти мають половину тексту в електронному листі.

Зрештою отримавши скріншот, ми дізналися, що проблема відбувається на iPhone, використовуючи темний режим. Поки всі вони були клієнтами, які користуються gmail або через програму «Пошта», або з Safari (у них одна і та ж проблема). Я не впевнений, чи є фактор gmail релевантним чи збігом обставин.

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

Чи можна щось зробити, щоб темний режим не міняв наш текст із чорного на білий?

Слід зазначити, що у нас також є вбудований QR-код в електронну пошту, тому я стурбований рішеннями, які дозволять темному режиму продовжувати відновлювати нашу повну електронну пошту, оскільки я вважаю, що це ускладнить розпізнавання QR-коду. .

Редагувати: це не пов’язано з будь-яким кодом програми, тому вказівки щодо розробки iOS для темного режиму не застосовуються. Це просто питання про те, як програма Apple Mail на iOS 13 у темному режимі відображає HTML-адресу електронної пошти.

— Джессіка
джерело

Можливий дублікат випуску білого кольору iOS13 з текстомColor of UIKit

— Pratik

Що станеться, якщо ви чітко встановите колір шрифту? Я припускаю, що темний режим змінює шрифт лише на білий, якщо він залишився із кольором за замовчуванням.

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

Пов’язано: webkit.org/blog/8840/dark-mode-support-in-webkit

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

@PratikSodha це питання стосується додатків для iOS, я просто кажу про HTML-адресу електронної пошти, що відображається в додатку Apple Mail у темному режимі.

— jessica

@FrankSchlegel колір і колір тла були встановлені явно скрізь, і вони все ще зміщуються. Посилання, яке ви надали, мав відповідь, я повинен був встановити color-scheme: light onlyвсі елементи. Дуже дякую.

— jessica

Відповіді:

Ви можете примусово видалити це на пристроях 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>

Крім того, переконайтеся, що ваш зовнішній елемент із кольором тла має клас "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 на всіх елементах було відповіддю. Дякую!

— Джессіка
джерело