Как сделать email письмо интернет-магазина для тёмной темы
Тёмная тема включена у части ваших подписчиков, и почтовые клиенты инвертируют цвета без спроса. Разбираем, как подготовить вёрстку письма, чтобы логотип не исчезал, а кнопка «Купить» оставалась заметной в обоих режимах.
Покупатель открывает письмо вечером, когда у него включена тёмная тема, — и вместо аккуратной подборки товаров видит белое поле, исчезнувший логотип и кнопку, которая сливается с фоном. Проблема не в дизайнере: почтовые клиенты умеют сами инвертировать цвета, не спрашивая разрешения. Разберём по шагам, как подготовить email рассылку для интернет магазина так, чтобы она одинаково хорошо читалась и в светлой, и в тёмной теме.
Почему тёмная тема — это не косметика
Тёмный режим перестал быть экзотикой: он включён по умолчанию во многих операционных системах, а мобильные клиенты применяют его к письмам автоматически. Для магазина это значит, что часть аудитории видит вашу вёрстку в цветах, которых вы не задавали.
Самое неприятное здесь — не «некрасиво», а «нечитаемо». Текст может стать светлым на светлом, логотип — пропасть, а цена товара — превратиться в бледное пятно. Именно поэтому тёмную тему проверяют до отправки, а не после первых жалоб.
Тёмная тема — это не второй дизайн, а стресс-тест: он показывает, насколько вёрстка устойчива к инверсии.
Три сценария: что делают почтовые клиенты
- Полная инверсия. Клиент перекрашивает фон и текст «на лету»: светлые блоки становятся тёмными, тёмный текст — светлым. Так ведут себя Outlook.com и часть Android-клиентов.
- Частичная инверсия. Меняются только отдельные цвета, часто с сохранением изображений. По этому пути идёт Apple Mail: он анализирует яркость блоков и подстраивает контраст.
- Без инверсии вёрстки. Клиент затемняет собственную «рамку», но ваше письмо остаётся светлым островом внутри тёмного интерфейса. Это Gmail в вебе и ряд мобильных приложений.
Единого стандарта нет, поэтому задача — собрать макет, который выживает во всех трёх сценариях сразу.
Чек-лист: 8 шагов перед отправкой
- Уберите крайности. Замените чистый белый #FFFFFF на почти белый #F7F7F7, а чёрный #000000 — на тёмно-серый #1E1E1E. Резкие границы при инверсии выглядят грязнее, чем мягкие.
- Добавьте meta-теги. В <head> пропишите <meta name="color-scheme" content="light dark"> и <meta name="supported-color-schemes" content="light dark">: так вы сообщаете клиенту, что поддерживаете оба режима.
- Опишите тёмную версию через media query. Добавьте @media (prefers-color-scheme: dark) и переопределите фоны, текст и кнопки — обязательно с !important, потому что инлайн-стили имеют более высокий приоритет.
- Переведите логотип в прозрачный PNG. Картинка с белой подложкой при инверсии превратится в белый прямоугольник. Прозрачный фон и одноцветный знак — безопаснее.
- Проверьте контраст. Для основного текста держите соотношение не ниже 4,5:1, для крупных заголовков — 3:1. Это ориентир WCAG, и в тёмной теме он важнее, чем в светлой.
- Откажитесь от текста внутри картинок. Цены, даты и условия акции должны быть HTML-текстом: изображения клиенты инвертируют непредсказуемо.
- Соберите кнопку кодом. HTML-кнопка с заливкой и контрастной подписью гарантированно останется читаемой, а кнопка-картинка — лотерея.
- Уберите хрупкие детали. Тонкие разделители в 1 px, тени и полупрозрачные плашки в тёмной теме исчезают — заменяйте их отступами и явными границами.
Технические детали, которые чаще всего упускают
Фон письма и структура блоков
Внешний фон и фон контентного блока делайте разными по тону: если после инверсии они станут одинаковыми, письмо превратится в однотонный прямоугольник без структуры. Фон контейнера задавайте через CSS, а не только через атрибут body.
Предзаголовок и служебный текст
Серый мелкий текст — дисклеймеры, «отписаться», «посмотреть в браузере» — в тёмной теме легко становится невидимым. Задавайте ему тот же уровень контраста, что и основному тексту, а не «полупрозрачный серый по умолчанию».
Цвета, которые ведут себя предсказуемо
Устойчивее всего работают насыщенные оттенки средней яркости: они не выгорают при инверсии и сохраняют контраст с фоном. Пастельные тона и полупрозрачность через rgba ведут себя непредсказуемо — часть клиентов просто игнорирует альфа-канал.
Альтернативная тёмная версия
Если шаблон сложный, надёжнее сделать две контентные версии и показывать нужную через media query. Такой подход дороже в поддержке, зато предсказуем: цветами управляете вы, а не алгоритм клиента.
Частые ошибки интернет-магазинов
- Логотип и баннеры сохранены как JPG с белым фоном.
- Промокод или цена вынесены в изображение.
- Кнопка «Купить» сделана картинкой без альтернативного текста и фона.
- Тёмный текст стоит на светлой плашке, которая после инверсии тоже становится тёмной.
- Проверка выполнена только в одном клиенте — обычно в том, которым пользуется сам маркетолог.
Как тестировать, чтобы не угадывать
Минимальный набор для проверки: Gmail в приложении на Android и iOS, Apple Mail, Outlook на Windows, Outlook.com и веб-клиент Gmail. В каждом из них включите тёмную тему системы или аккаунта и просмотрите письмо целиком, а не только превью в списке.
Для серийных отправок удобно подключить сервис превью-тестирования (Litmus, Email on Acid): он рендерит письмо сразу в десятках клиентов в двух режимах. Если такой возможности нет, заведите чек-лист и прогоняйте по нему каждый новый шаблон.
Простой тест: выключите картинки и включите тёмную тему. Если письмо всё ещё понятно и кликабельно — вёрстка готова.
Вывод
Адаптация под тёмную тему начинается с базы: умеренные цвета вместо чистого белого и чёрного, meta-теги, media query, прозрачные изображения и HTML-кнопки. Такой каркас не требует второго дизайна и работает в большинстве почтовых клиентов. Регулярная проверка в реальных приложениях закрывает остаток рисков.
Если вы ведёте email рассылку для интернет магазина на потоке, добавьте тёмную тему в обязательный чек-лист перед отправкой — вместе с проверкой ссылок, UTM-меток и ссылки на отписку. Это дешевле, чем терять заказы из-за невидимой кнопки.
Материал носит информационный характер: алгоритмы инверсии и поведение почтовых клиентов меняются вместе с обновлениями, поэтому итоговые решения проверяйте на своих шаблонах и своей аудитории.