Отображение писем в темной теме

Темная тема — это системная настройка устройства или почтового клиента, при которой фон интерфейса меняется со светлого на темный.

Большинство современных почтовых клиентов (Gmail, Apple Mail, ЯндексПочта) в темной теме автоматически инвертируют или корректируют цвета письма для визуального комфорта.

Как почтовые клиенты ведут себя в темной темеКак почтовые клиенты ведут себя в темной теме

Есть четыре сценария поведения:

Настройки темной темы в конструкторе MindboxНастройки темной темы в конструкторе Mindbox

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

1. Готовьте изображения с прозрачным фоном1. Готовьте изображения с прозрачным фоном

Если логотип или картинка лежит на белом фоне — в темной теме вокруг нее появится белый прямоугольник.

Чтобы этого избежать:

• Сохраняйте логотипы и иконки в PNG с прозрачным фоном (background: transparent). Изображение органично впишется в любой фон — и светлый, и темный.
• Если прозрачность невозможна (например, JPEG изображение), убедитесь, что цвет фона изображения совпадает с цветом фона блока/письма, или используйте фоновую картинку вместо цвета (см. рекомендацию 3).

2. Выбирайте цвета, которые читаются в обоих режимах2. Выбирайте цвета, которые читаются в обоих режимах

Почтовые клиенты инвертируют контрастные цвета: светлый фон становится темным, черный текст — белым. При использовании неконтрастных цветов, в темной теме текст может «исчезнуть».

Что поможет:

• Используйте высококонтрастные пары: темный текст на светлом фоне и наоборот. После инверсии они останутся читаемыми.
• Избегайте едва заметных различий между цветом текста и фона.
• Тестируйте письмо перед отправкой на устройстве с темной темой.

Например, светло-серый текст на белом фоне превратиться в темно-серый на темном фоне.

3. Используйте белую фоновую картинку, чтобы зафиксировать фон3. Используйте белую фоновую картинку, чтобы зафиксировать фон

Если важно сохранить белый фон письма и блоков в темной теме, установите белую фоновую картинку вместо цвета фона на всех уровнях: письмо, блок, строка.

В конструкторе фон задается независимо на трех уровнях:

• письмо — общий внешний фон;
• блок — фон блока с текстом, картинкой или кнопкой.
• строка — фон строки внутри письма;

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

Как настроить фон в конструкторе Mindbox:

1. Откройте настройки нужного элемента (письма, блока или строки).

2. В разделе «Фон» вместо цвета выберите «Изображение».

3. Загрузите белую однопиксельную картинку и задайте цвет под изображением

   Цвет под изображением нужен для использования его вместо картинки в Outlook на Windows — он не отображает фоновые картинки в ряде элементов и подставит вместо них этот цвет.

   

4. Повторите то же самое на уровне строки и блока:

   

5. Убедитесь, что у внутренних элементов (например, текста) стоит прозрачный фон:

   

4. Пропишите CSS-стили для темной темы4. Пропишите CSS-стили для темной темы

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

Как добавить код в конструкторе:

Откройте Настройки письма → Глобальные (CSS) стили и вставьте код в это поле.

Пример кода:

@media (prefers-color-scheme: dark) {
          body, .wrapper {
            background-color: #1a1a1a !important;
          }
          .text-block {
            color: #ffffff !important;
          }
          .btn {
            background-color: #ffffff !important;
            color: #000000 !important;
          }
        }
        

После указания кода сохраните и протестируйте письмо в темном режиме на своих устройствах.

Как проверить письмо в темной темеКак проверить письмо в темной теме

1. Включите темную тему на тестовом устройстве (в системных настройках или в самом почтовом клиенте);
2. Отправьте тестовое письмо;
3. Проверьте его в клиентах с разным поведением:
   • Яндекс Почта (веб и мобильная) — не меняет / частично инвертирует;
   • Mail.ru — частично инвертирует;
   • Apple Mail на macOS — почти не меняет;
   • Gmail на iOS — полностью инвертирует;
   • Outlook на Windows — полностью инвертирует и игнорирует медиа-запросы.