Инвертирование цветов в рассылке: почему это важно

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

В статье расскажем, как работает инверсия цвета в email и как настроить переход в Dark Mode правильно.

Что такое тёмная тема в email рассылках

Ошибочно думать, что инвертация цветов — это полное их изменение на другие. На самом деле это просто смена оттенков. Изначальный цвет становится более контрастным, чтобы быть хорошо читаемым в тёмной версии. То есть синий не превратится в жёлтый и наоборот.

Почтовые клиенты, которые поддерживают Dark Mode

Какой бывает инверсия цвета в письмах

Сервисы рассылок инвертируют цвета по своим правилам или ничего не меняют при переключении на Dark Mode.

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

Зачем нужно адаптировать письма под Dark Mode

Адаптация под тёмную тему — не всегда простое решение, для которого нужны ресурсы: время, знания кода. Также почтовики иногда меняют правила работы Dark Mode. Поэтому, если вы решили перейти на «тёмную сторону», придется следить за их изменениями всегда.

Преимущества адаптации писем под Dark Mode

Адаптация рассылок для Dark Mode без кода

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

2. Сделайте письмо с прозрачным фоном, тогда контраста при переключении на Dark Mode не будет.

3. Оформите лого и другие атрибуты бренда как картинки также без фона в формате PNG. Иначе при инверсии может случиться так:

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

5. Верстайте email сразу в тёмных цветах, если такой стиль подходит вашему бренду.

Инвертирование в письмах через медиа-запросы и мета-теги

Как настроить инвертирование цвета

В почтовике без поддержки медиа-запросов:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

С медиа-запросами:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
      /* Normal styles */
      @media (prefers-color-scheme: dark) {
            /* Dark mode styles */
      }
</style>

Настройка цветов

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

<style>
      .normal {
            background-color: white;
            color: blue;
      }
      .themed {
            color: blue;
      }
      @media (prefers-color-scheme: dark) {
            .themed {
                  background-color: white;
            }
      }
      @media (prefers-color-scheme: light) {
            .themed {
                  background-color: black;
            }
      }
</style>

Замена изображений при переключении в тёмный режим

<style>
      :root {
            color-scheme: light dark;
            supported-color-schemes: light dark;
      }
      @media (prefers-color-scheme: dark) {
            .lightimage {
                  display: none !important;
            }
            .darkimageWrapper,
            .darkimage {
                  display: block !important;
            }
      }
</style>

<td>
      <img src="lightimage.png" width="600" height="auto" style="display: block; height: auto;" class="lightimage">
      <div class="darkimageWrapper" style="mso-hide: all; display: none">
            <img src="darkimage.png" width="600" class="darkimage" style="display: none;">
      </div>
</td>

Резюме

При включенной тёмной теме на телефоне или компьютере некоторые почтовые клиенты меняют цвета писем на менее контрастные оттенки. Так эмейл выглядит приятнее для глаз.

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

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