Краткий гайд по тёмной теме в письмах
Впервые опубликовано 17 марта 2021, обновлено 31 июля 2024
Разобрались досконально с тёмной темой в письмах, провели исследование и теперь делимся знаниями с вами. Этот краткий, но ёмкий гайд поможет вам разобраться:
- насколько среди пользователей популярна тёмная тема в рассылках,
- как и где она работает,
- как с ней взаимодействовать.
Почему в письмах используют тёмную тему
- менее утомительна для глаз,
- лучше воспринимается плохо видящими людьми,
- экономит батарею, увеличивает срок её службы,
- выглядит стильно.
Тёмную тему в рассылках предпочитают
- 45% пользователей Apple mail на iOS (ист. EMAILMATRIX)
- 35% пользователей Apple mail (ист. Litmus)
Как почтовики реагируют на тёмную тему
- Не реагируют на тёмную тему вообще.
Большинство десктопных клиентов, некоторые веб-почтовики, в том числе Gmail и «Яндекс Почта». - Частично инвертируют яркость цветов — меняют светлый фон на тёмный и тёмный текст на светлый. Изначально тёмный фон со светлым текстом останутся неизменными.
Mail.ru, Outlook на мобильных и в веб-интерфейсе, «Яндекс Почта» на мобильных, Gmail на Android. - Делают инверсию яркости независимо от изначального цвета: даже тёмный фон со светлым текстом преобразуются в светлый фон с тёмным текстом.
Gmail на iOS. - Поддерживают кастомизацию элементов в зависимости от выбранной темы на устройстве.
Apple mail на macOS и iOS, Mail.ru на мобильных и в веб-интерфейсе.
Что делать, чтобы письма выглядели хорошо в любой теме
- Старайтесь использовать цвета, которые одинаково контрастно смотрятся и в светлой, и в тёмной теме.
- Используйте изображения с прозрачным фоном — PNG.
- Делайте светлую обводку, тени или свечение у тёмных элементов на картинках с прозрачным фоном, чтобы они не терялись в тёмной теме.
- Кнопки, свёрстанные картинками, должны быть видны на любом фоне. Делайте их контрастного цвета или добавляйте обводку.
- На этапе дизайна замените в макете фон на инвертированный по яркости и проверьте, как элементы будут смотреться на нём.
* Инвертированные цвета можно взять из таблички в конце этого гайда.
Кастомизация тёмной темы в рассылках
В Apple Mail (на MacOS и iOS) и Mail.ru (на мобильных и в веб-интерфейсе) можно настроить индивидуальный дизайн для светлой и тёмной темы: фон, цвета, шрифты, графику. Для этого используется медиазапрос @media (prefers-color-scheme: dark).
Как настроить:
- «Сообщите» почтовику, что ваши емейлы поддерживают тёмную тему, — в HTML-коде вашего письма добавьте метатеги в тег
<head>:<meta name=”color-scheme” content=”light dark”> <meta name=”supported-color-schemes” content=”light dark”>
- Настройте почтовики, которые поддерживают кастомизацию, с помощью медиазапроса в
<head>:@media (prefers-color-scheme: dark) { } - Поменяйте цвета шрифтов и фона — тёмный текст на светлый, а светлый фон — на тёмный:
@media (prefers-color-scheme: dark) { .copy { background-color: #222222; color: #eaeaea; } } - Можно поменять и размер шрифта, добавив к CSS, например:
@media (prefers-color-scheme: dark) { .copy { background-color: #222222; color: #eaeaea; font-size: 20px; line-height: 24px; } } - Можно предусмотреть один логотип для светлой темы и другой — для тёмной. Для этого пропишите в коде два варианта логотипа и соответствующие CSS для отображения каждого из них:
<img class=”light-img” src=”logo-light.png” alt=””> <img class=”dark-img” src=”logo-dark.png” alt=”” style=”display: none;”>
@media (prefers-color-scheme: dark) { .light-img { display: none !important; } .dark-img { display: block !important; } }
Сравнительная таблица почтовиков
Инвертирование цвета в разных почтовиках
Выбирайте для элементов письма изначально такие цвета, которые будут хорошо смотреться во всех почтовиках после инвертирования.
Источники
- гайд Litmus,
- личный опыт EMAILMATRIX 🙂
Ранее кастомизировать тёмную тему в некоторых почтовиках также позволял префикс селектора CSS [data-ogsc]. Теперь этот способ не работает. Но если хотите изучить его, можете прочитать выдержку из предыдущей версии статьи:
Для кастомизации элементов под тёмную тему в Outlook в веб-интерфейсе и на Андроиде можно использовать только префикс для селекторов CSS [data-ogsc]:
[data-ogsc] .dark-mode { display: block !important; }
Эти почтовики позволяют заменять изображения, но могут не позволить заменить некоторые цвета. Учитывайте это и обязательно протестируйте перед финальной отправкой письма.
Пример кастомизации картинок и цвета текста с data-ogsc:
[data-ogsc] .img_light {
display: none !important;
}
[data-ogsc] .img_dark {
display: block !important;
}
[data-ogsc] .text_block {
color: #ffffff !important;
background: #222222 !important;
}
[data-ogsc] .text_block a{
color: #fff2f2 !important;
}
Outlook на iOS поддерживает и медиазапросы, и префикс селектора CSS [data-ogsc], но и то и другое лишь частично. При использовании медиазапросов Outlook на iOS позволяет заменять изображения, но некоторые цвета в самом письме могут остаться неизменными. А при использовании data-ogsc Outlook на iOS вообще не позволяет менять изображения, некоторые цвета при этом также могут остаться неизменными.
Чтобы вашу стилизованную тёмную тему в рассылках увидело максимальное количество подписчиков, продублируйте в коде письма одни и те же стили и с префиксом, и в медиазапросах.
