_Это должно было быть короткое сообщение с несколькими картинками и простым решением. Но всё вышло из-под контроля. HTML-письма — дело сложное. Для развлечения посмотрите, как всё может пойти не так: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub 
Не стесняйтесь пролистать это сообщение и посмотреть на картинки. К концу я пришёл к выводу, что из-за популярности тёмной темы, возможно, стоит переработать сводное письмо, вместо того чтобы пытаться накладывать решения на текущий код. Это не в моей власти, и, возможно, я просто слишком долго в этом копался.
Появились некоторые недавние вопросы о том, как отображаются сводные письма в почтовых клиентах, настроенных на тёмную тему. Основная проблема заключается в том, что цвет фона заголовка сводного письма инвертируется в почтовых клиентах, которые обрабатывают тёмную тему путём полной инверсии цветов (приложение Gmail для iOS, Outlook 2021 для Windows, Office 365 для Windows и почтовый клиент Windows). Это создаёт проблему контраста между цветом заголовка и логотипом сайта.
В этих почтовых клиентах также есть проблема с цветом текста в кнопках и в разделе «С момента вашего последнего визита» сводного письма.
Все изображения ниже получены из сервиса тестирования электронной почты Litmus:
Со сайта Discourse с тёмной цветовой схемой, использующим белый PNG-логотип с прозрачным фоном:
Ожидаемый результат (Gmail App Dark для Android):
Плохой результат (Gmail Dark для iOS, OL Office 365 Dark, Outlook 2021 Dark, Windows 10 Mail Dark):
Обзор мобильных клиентов (Gmail для iOS — единственный клиент с очевидными проблемами с цветом заголовка):
Вот тот же тест с письмом Meta Digest (цветовая схема по умолчанию — светлая, тёмный PNG-логотип на прозрачном фоне). Обратите внимание, что в Meta не включена настройка сайта apply custom styles to digest, поэтому для клиентов, поддерживающих тёмную тему (Apple Mail и последние версии почтового клиента iOS), не применяются мета-теги и стили тёмной темы. Если бы настройка apply custom styles to digest была включена, я подозреваю, что тесты для iPhone в тёмной теме также имели бы проблемы с контрастом логотипа и фона.
Есть несколько способов принудительно установить цвет фона заголовка письма в соответствие с цветовой схемой сайта по умолчанию:
Для приложения Gmail на iOS цвет фона заголовка можно задать с помощью фоновой картинки, созданной с помощью linear-gradient. Фоновые картинки, созданные таким образом, не подвергаются инверсии цвета. Суть трюка в том, чтобы установить оба цвета linear-gradient равными значению цвета «header background» цветовой схемы сайта Discourse по умолчанию.
Это можно сделать сейчас, добавив пользовательский CSS на вкладку Администрирование / Настройка / Стиль письма / CSS. Установите значения цветов равными значению цвета «header background» вашей цветовой схемы по умолчанию. (Обратите внимание: использовать var(--header_background) для установки цвета в редакторе CSS для писем невозможно):
.digest-header {
background-image: linear-gradient(#111, #111);
}
Протестировав этот подход для письма Meta Digest, я начинаю сомневаться в его применимости для сайтов со светлой цветовой схемой по умолчанию. Логотип читаем, но не выглядит ли это немного странно?
Для настольных почтовых клиентов Outlook 2021 Dark и Windows 10 Mail Dark проблему инверсии цвета фона заголовка можно решить, добавив правило !important к свойству background-color, установленному для .digest-header. Это нельзя сделать через пользовательский CSS, так как Discourse уже добавляет стиль background-color к элементу без правила !important. Это правило добавляется после пользовательского CSS, поэтому оно имеет приоритет. (Обратите внимание: этот подход, похоже, работает только для принудительной установки тёмного цвета фона. Он не срабатывает, когда я пытаюсь использовать его для установки фона заголовка в #ffffff.)
Проблема с цветом текста в разделе «С момента вашего последнего визита» для почтовых клиентов, выполняющих полную инверсию цветов, не имеет простого решения. Здесь предложен хак для iOS Gmail: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. Он использует режимы наложения, чтобы обмануть Gmail и заставить его установить белый цвет текста. Теоретически это работает, но учитывая сложность разметки сводного письма, я не думаю, что стоит это развивать.
Подводя итог, я считаю, что для сайтов Discourse, у которых тёмная цветовая схема является схемой по умолчанию, хорошим решением на данный момент будет добавление приведённого выше CSS на вкладку Стиль письма / CSS. Это сделает логотип сайта читаемым в приложении Gmail Dark для iOS. Его добавление не вызвало никаких проблем в других протестированных почтовых клиентах. Для сайтов со светлой цветовой схемой по умолчанию я менее уверен в этом подходе. Принудительная установка белого фона заголовка на иначе тёмном экране выглядит не очень хорошо.
Сводное письмо было разработано до того, как тёмная тема стала широко использоваться. Возможно, из-за недавней популярности тёмной темы имеет смысл переработать сводное письмо с целью обеспечить его корректное отображение как в тёмной, так и в светлой теме на популярных почтовых клиентах.
Если полная переработка сводного письма выходит за рамки задач, возможно, стоит рассмотреть возможность внедрения настроек dark_mode_digest_logo и light_mode_digest_logo. По крайней мере, в некоторых почтовых клиентах можно будет определять режим и отображать соответствующий логотип.
Для улучшения тёмной темы в настольных клиентах Outlook компания Discourse могла бы оставить некоторые имена классов в HTML письма вместо того, чтобы удалять их все. Эти имена классов можно было бы использовать для таргетинга тёмной темы в Outlook: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (Обратите внимание: Outlook не поддерживает несколько имён классов для одного элемента, поэтому некоторые имена классов всё ещё придётся удалять из файла digest.html.erb.)
