Темная тема в письмах: как адаптировать дизайн и не потерять треть подписчиков

34% российских пользователей читают почту в темной теме. Еще 34% переключаются между режимами в зависимости от времени суток.

При этом большинство рассылок к этому не готовы. Чёрный логотип исчезает на тёмном фоне. Белый текст становится нечитаемым на инвертированном белом блоке. Кнопки сливаются с фоном.

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

Как почтовики обрабатывают темную тему

Единого стандарта нет. Каждый почтовый сервис обрабатывает тёмную тему по-своему. По сути, есть три варианта, как он это делает:

Gmail на Android инвертирует все цвета автоматически. Белый фон становится тёмным, чёрный текст — светлым. Простое решение, но иногда ломает дизайн полностью.
Яндекс.Почта в мобильном приложении меняет только светлые элементы. Если у вас изначально темный блок со светлым текстом — он останется без изменений. Логично, но создает визуальный диссонанс.
Веб-версии Gmail и Яндекса не трогают дизайн вообще. Включили тёмную тему интерфейса — письма остались светлыми. Контраст режет глаза, особенно вечером.

Это значит, что одно и то же письмо может выглядеть по-разному, в зависимости от того, где его открыли. И универсального решения нет.

Главные проблемы и их решения

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

Исчезающие логотипы

Чёрный логотип на прозрачном фоне. В обычной теме выглядит отлично. В темной — становится невидимкой.

Решение: добавьте белую обводку или тень к логотипу. В светлой теме она почти незаметна, в тёмной — спасает ситуацию.


    css
.logo {
  filter: drop-shadow(0 0 1px rgba(255,255,255,0.8));
}

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

Нечитаемый текст на цветных блоках

Например, у вас есть синий блок с белым текстом. Gmail инвертирует: блок становится оранжевым, текст — черным. Читать невозможно.

Решение: используйте нейтральные цвета для фоновых блоков. Серые оттенки инвертируются предсказуемо. Яркие цвета — лотерея.

Если нужен именно цветной блок — сделайте его картинкой. Изображения не инвертируются.

Белые блоки, которые остаются белыми

Сделали акцентный блок с белым фоном? В некоторых клиентах он останется ослепительно белым на черном фоне.

Решение: не используйте чистый белый (#ffffff). Берите светло-серый (#f8f8f8). Разница минимальная, но при инверсии такой цвет корректно преобразуется в темный.

Технические способы адаптации

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

Метатеги для поддержки

Добавьте в <head> письма:


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

Этот код сообщает почтовому клиенту, что ваше письмо готово к темной теме. Работает не везде, но где работает — помогает.

Медиазапросы для кастомизации

Пример:


    css
@media (prefers-color-scheme: dark) {
  .text-block {
    color: #ffffff !important;
    background-color: #1a1a1a !important;
  }
}

Этот код проверяет, включена ли у пользователя тёмная тема, и если да — автоматически перекрашивает указанные элементы письма в тёмные цвета.

Поддерживают: Apple Mail, Outlook на iOS, частично Mail.ru.

Не поддерживают: Gmail, Яндекс.Почта, большинство веб-версий.

Инлайн-стили с правильными цветами

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

Вместо контрастных сочетаний типа черный/белый используйте:

Темно-серый (#333333) для текста
Светло-серый (#f5f5f5) для фона
Приглушенные цвета для акцентов

Такая палитра выглядит хорошо в обеих темах без дополнительных настроек.

Изображения: отдельная головная боль

Картинки не инвертируются. Это и плюс, и минус.

Проблема 1: светлая инфографика на прозрачном фоне. В темной теме она становится нечитаемой.

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

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

Решение: добавьте рамку или тень к скриншотам. Это создаст визуальное отделение от фона письма.

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

Тестирование: без этого никуда

Проверять нужно минимум в четырех средах:

Android + Gmail — самая агрессивная инверсия
iOS + Apple Mail — поддерживает медиазапросы
Android + Яндекс.Почта — частичная инверсия
Веб-версии — обычно не меняют дизайн

Сервисы типа Litmus помогают, но российских почтовиков там нет. Придется тестировать вручную.

Лайфхак: создайте тестовую группу из коллег с разными устройствами. Перед отправкой массовой рассылки — отправьте им.

Практический чек-лист

Что проверить перед отправкой:

Логотип

Есть контрастная обводка или тень
Или подготовлена светлая версия
Проверено на тёмном фоне

Текстовые блоки

Нет чистого чёрного и белого в тексте
Цветные блоки не слишком яркие
Контраст достаточный в обеих темах

Изображения

У прозрачных PNG есть подложка
Иконки имеют контрастную обводку
Alt-тексты прописаны (если картинка не загрузится)

Кнопки

Фон кнопки не полностью белый
Текст читается на инвертированном фоне
Есть рамка для дополнительного выделения

Компромиссные решения

Не у всех есть ресурсы на полную адаптацию. Вот что можно сделать быстро:

Вариант «Минимум усилий»

Используйте только картинки с белым фоном и темный текст на них. Да, в темной теме будут белые прямоугольники. Зато всё читаемо.

Вариант «Золотая середина»

Откажитесь от чистых цветов. Вместо белого фона — светло-серый (#fafafa). Вместо черного текста — темно-серый (#2b2b2b). Инверсия будет мягче.

Вариант «Фокус на главном»

Адаптируйте только критичные элементы: логотип, заголовки, кнопки. Остальное пусть инвертируется как получится.

Будущее темной темы

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

Почтовые клиенты постепенно улучшают поддержку. Gmail, например, обещает внедрить медиазапросы «в ближайшее время» уже несколько лет. Яндекс экспериментирует с умной инверсией.

Но пока единого решения нет.

Что делать? Принять как данность: ваше письмо будет выглядеть по-разному у разных получателей. Задача — сделать так, чтобы везде было приемлемо.

Фокусируйтесь на базовых принципах: контрастность, читаемость, узнаваемость бренда. Если эти три пункта соблюдены — вы справились!

Понравилась статья?