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

В данной статье мы разберемся в основных моментах, которые помогут сделать письма легко читаемыми и привлекательными для получателей, независимо от выбранной темы в почтовом приложении.

Как работает темная тема

Стандартно темная тема в почтовых клиентах изменяет цветовую палитру и общий стиль интерфейса, включая в себя изменение цветов фона, текста, ссылок и прочих элементов. Она придает письмам более темный и контрастный вид, что удобно для чтения ночью или в условиях низкой освещенности.

Разные почтовые клиенты могут иметь различные подходы к отображению цветов темной темы:

• никак не изменяют письмо при включенной темной теме;

В стандартном почтовом клиенте для iOS тема меняется только для приложения. Цветовая схема письма остается без изменений.

• частично инвертируют цвета. Это касается только светлых элементов, темные или черные блоки не изменяются;

• применяют более сложные алгоритмы для адаптации всех элементов письма под темный режим, что обеспечивает наилучшее отображение.

Пример различий отображения одного и того же письма в Gmail и Яндекс Почте при использовании темной темы

Эти особенности темного режима следует учитывать при выборе цветовых схем для вашего шаблона.

Dark mode в различных почтовых клиентах.

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

Важно отметить, что поддержка темной темы может варьироваться в зависимости от конкретного почтового клиента и его версии. Вот некоторые из наиболее популярных почтовых клиентов, которые на данный момент поддерживают темную тему:

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

Советы для корректного отображения писем в темной теме.

• Цветовые схемы и палитры. В темном режиме изменяются цвета элементов в письме, фон может стать более темным, а цвет текста — светлее или контрастнее. Поэтому, неплохим вариантом будет протестировать отображение писем в темном режиме и составить таблицу с цветами, которые обычно используете при создании шаблонов, и как эти цвета инвертируются. В дальнейшем это значительно упростит процесс создания рассылок и поможет обеспечить хорошую читаемость и сохранить дизайн письма.

• Работа с изображениями. Элементы, сверстанные картинкой: логотипы, кнопки и пр., рекомендуем загружать с прозрачным фоном в формате png и использовать контрастную обводку или тень, чтобы они легко читались как в светлом, так и в темном режиме.

• Размер текста. Важно учитывать, что чем мельче текст, тем проще пользователю читать его в светлой теме. Поэтому, если в письме есть крупные текстовые блоки, рекомендуем протестировать отображение в темном, и в светлом оформлении и при необходимости увеличить шрифт, чтобы письмо было легко читаемым.
  
• Медиазапросы. Если есть возможность редактировать HTML-код шаблона рассылки, то можно использовать медиазапросы, которые позволяют применять стили только для определённых устройств. Например:

Применение стилей для темной темы:

@media (prefers-color-scheme: dark) {
  /* Здесь можно указать стили, которые будут применяться только в темной теме */
  body {
    background-color: #333333;
    color: #ffffff;
  }
  
  /* Дополнительные стили для элементов в темной теме */
  .section {
    background-color: #222222;
    border: 1px solid #555555;
  }
}

В этом примере мы используем медиазапрос prefers-color-scheme: dark, чтобы применить определенные стили только в темной теме. В данном случае, мы меняем фоновый цвет и цвет текста для всего документа, а также добавляем дополнительные стили для элемента с классом .section.

Инвертирование цветов для темной темы:

@media (prefers-color-scheme: dark) {
  /* Инвертируем цвета элементов */
  body {
    filter: invert(100%);
  }
  
  /* Исправляем инвертированный цвет для конкретного элемента */
  .logo {
    filter: invert(0%);
  }
}

В этом примере мы используем фильтр invert() для инвертирования цветов всего документа в темной теме. Однако, инверсия цветов может привести к проблемам с читаемостью, поэтому мы также исправляем инвертированный цвет для конкретного элемента с классом .logo.

Подсветка ссылок при наведении для темной темы:

@media (prefers-color-scheme: dark) {
  /* Изменяем цвета ссылок */
  a {
    color: #ff9900;
  }
  
  /* Изменяем цвета ссылок при наведении */
  a:hover {
    color: #ffa500;
  }
}

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

Это лишь некоторые примеры медиазапросов, которые можно использовать для адаптации HTML-шаблонов под темную тему. Вы можете настроить стили и свойства в соответствии со своими потребностями и дизайном.

• Тестирование. Самый обязательный пункт 🙂 Проверьте, как ваша рассылка отображается в разных почтовых клиентах, браузерах и устройствах с включенной темной темой. Это позволит обнаружить потенциальные проблемы с отображением рассылки и внести необходимые корректировки.

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