Тёмная тема стала мастхэвом пользовательских интерфейсов ещё в 2020 году, но многие бренды до сих пор не учитывают это в своих email-рассылках. Тем временем, тёмную тему предпочитают:
45% пользователей Apple Mail (ист. EMX)
7,5% пользователей Apple Mail на macOS (ист. Limits)
Тёмная тема:
Менее утомительна для глаз
Лучше воспринимается людьми с нарушениями зрения
Экономит батарею, увеличивает срок её службы
Выглядит стильно
Как почтовики реагируют на тёмную тему
Не реагируют на тёмную тему. Большинство десктопных почтовых клиентов и некоторые веб-почтовики.
Частично инвертируют яркость цветов — меняют светлый фон на тёмный и тёмный текст на светлый. Изначально тёмный фон со светлым текстом останутся неизменными. Яндекс на мобильных, Mail.ru на мобильных и в веб-интерфейсе, Outlook на мобильных и в веб-интерфейсе, Gmail на Андроиде.
Делают инверсию яркости независимо от изначального цвета: тёмный фон со светлым текстом преобразуются в светлый фон с тёмным текстом. Gmail на iOS.
Поддерживают кастомизацию элементов в зависимости от выбранной темы на устройстве. Apple mail (MacOS и iOS), Outlook в веб-интерфейсе и на мобильных, Mail.ru в веб-интерфейсе.
Что делать, чтобы емейлы выглядели хорошо в любой теме
Старайтесь использовать цвета, которые одинаково контрастно смотрятся и в светлой, и в тёмной теме.
Используйте изображения с невидимым фоном — PNG.
Делайте светлую обводку, тени или свечение у тёмных элементов на картинках с прозрачным фоном, чтобы они не терялись в тёмной теме.
Кнопки, свёрстанные картинками, должны быть видны на любом фоне. Делайте их контрастного цвета или добавляйте обводку.
На этапе дизайна замените в макете фон на инвертированный по яркости и проверьте, как элементы будут смотреться на нём.
Кастомизация тёмной темы
В Apple Mail на MacOS и iOS, в веб-интерфейсе Mail.ru и частично в Outlook можно настроить индивидуальный дизайн для светлой и тёмной темы: фон, цвета, шрифты, графику.
В Apple Mail и в веб-интерфейсе Mail.ru для этого используется медиазапрос @media (prefers-color-scheme: dark).
В Outlook на Андроиде
и в веб-интерфейсе используйте префикс селектора CSS [data-ogsc]. Outlook на iOS частично поддерживает
и медиазапросы, и data-ogsc.
Сравнительная таблица почтовиков
