Привет! Меня зовут Евгений Шишков, я CPO конструктора рассылок EmailMaker. И я давно сталкиваюсь с одной и той же проблемой: и для мобильных, и десктопов тёмная тема уже стала классикой. Но когда дело доходит до отдельных приложений, любители этого режима рискуют выжечь себе глаза, и почтовые клиенты тут — не исключение. И даже если сам клиент тёмную тему поддерживает — далеко не факт, что письма в ней тоже будут тёмными. Одни просто отобразятся светлыми, другие криво адаптируются и от этого становятся нечитаемыми.
Есть пара способов, как адаптировать свои письма под dark mode и перестать светить ими, как паяльной лампой, в глаза получателям. Ниже расскажу, как популярные клиенты ведут себя в тёмном режиме, во что превращают ваши входящие и как на это можно повлиять при помощи нюансов вёрстки и кода — пригодится, если вы хоть раз сталкивались с созданием писем или шаблонов для них.
Почему стоит использовать тёмную тему в электронных письмах
Изначально предполагалось, что светлая тема должна использоваться в дневное время, а тёмная — в вечернее. Но большинство пользователей не меняют режимы регулярно, а выбирают один из вариантов. Причём статистика показывает, что люди больше предпочитают как раз тёмную тему: согласно данным на 2024 год, 82% владельцев смартфонов выбирают именно её. Причины разные — кто-то при помощи dark mode экономит заряд батареи, кто-то считает, что это благотворно влияет на глаза, а кому-то так просто больше нравится.
И вот представьте: на устройстве, где установлена тёмная тема, пользователь открывает почтовый клиент, где тоже всё тёмное, видит письмо, кликает… и глаза выжигает яркий белый свет с экрана. У него должна быть очень большая мотивация прочесть письмо. В противном случае он, скорее всего, поспешит закрыть окно — и не факт, что откроет ваши письма в будущем.
Конечно, это утрированный сценарий. Далеко не все используют тёмную тему, далеко не для всех использующих её светлое письмо станет поводом отписаться от рассылки.
В целом, dark mode — не обязательное решение, но если можно сделать взаимодействие пользователей с вашей рассылкой приятнее, почему бы его не внедрить?
Как работает тёмная тема в письмах
Почтовые клиенты могут поддерживать или не поддерживать тёмную тему, но даже если она у них есть, работает она там очень по-разному. Вот три основных варианта, что они могут делать с вашими письмами в dark mode.
Ничего. Базовый уровень поддержки тёмной темы — её отсутствие. Это почтовые клиенты, которые никак не изменяют ваше письмо в зависимости от того, включена тёмная тема у пользователя или нет. В целом, у этого даже есть свои преимущества — вы можете быть уверены, что письмо дойдёт в том виде, который вы ему придали. Чаще всего так себя ведут десктоп и веб-почтовики, а также устаревшие мобильные приложения.
Инверсия цвета. Пожалуй, самый неприятный из-за своей непредсказуемости вариант поведения почтового клиента: он может инвертировать цвета вашего письма целиком или частично — и зачастую это выглядит не слишком приятно. Частичная инверсия ещё ничего: обычно она подразумевает только замену светлого фона на тёмный, а тёмного текста — на светлый.
При полной инверсии почтовик пытается преобразовать все цвета, зачастую затрагивая не только цвет, но также яркость и сатурацию. Иногда это может выглядеть нормально, а иногда — так себе. И кроме того — если вы изначально отправляли тёмное письмо, в dark mode при полной инверсии оно, по иронии судьбы, может стать светлым!
Таким поведением отличается Outlook (веб-версия и почти все его приложения для десктопа и мобильных) и мобильное приложение Gmail.
Поддержка кастомной тёмной темы. Некоторые почтовые клиенты позволяют использовать CSS для настройки дизайна и его переключения между тёмной и светлой темами. Поддерживается на MacOS и iOS последних версий.
А как поддерживается тёмная тема писем у российских сервисов?
Короткий ответ — тоже по-разному. В Яндекс Почте можно установить тёмную тему, но она не повлияет не только на само письмо, но даже на фон, на котором оно расположено. Никакой инверсии, и поддержки тёмной темы, заданной через CSS, тоже никакой.
В Яндекс Почте, даже если вы отправите письмо с тёмным дизайном, вокруг него останется белое поле
У Mail.ru в тёмной теме письма подвергаются частичной, но довольно радикальной инверсии.
Вот, например, одно письмо из коллекции шаблонов EmailMaker. Обратите внимание на используемые цвета: белый фон, чёрный текст, кнопки с чёрной обводкой, а внизу коричневые заголовок и кнопка.
При переходе в тёмную версию меняется фон и цвет текста. Но цвет рамок у кнопок остался чёрным, хотя текст в них инвертировался. Коричневый заголовок претерпел изменения, но цвет кнопки остался прежним. Видимо, такой оттенок коричневого показался почтовику достаточно контрастным.
Заодно решил проверить, как Mail.ru себя поведёт, если ему прислать письмо, изначально сделанное в тёмных тонах. Спойлер: светлыми они не стали, но некоторые элементы почтовику всё равно показались недостаточно яркими — и вот у нас в руках снова паяльник.
Как сделать письмо адаптивным к тёмной теме
Подготовка изображений
Я считаю этот пункт самым важным и единственным универсальным для всех почтовых клиентов. Правильная подготовка изображений позволит вашему письму выглядеть достойно при инверсии цвета. Для этого важно сделать три вещи.
Удаляем фон. Все изображения, которые можно оставить без фона — делаем таковыми (для этого вместо JPG нужно использовать формат PNG или GIF). Так у картинки не будет бесячего квадратного контура-подложки.
Убрать фон удобно, например, через плагин RemoveBG в Figma, также можно выделить и вырезать объект через режим «Маска» в Photoshop или использовать любой другой удобный вам способ.
Добавляем поля. Иногда прозрачный фон использовать не вариант — например, когда на картинке чёрный шрифт или однотонный набросок, и на чёрном фоне он потеряется или просто будет выглядеть не ок. В таком случае лучше не убирать фон, а добавить пространство вокруг изображения. Это позволит сохранить читабельность и будет выглядеть приемлемо.
В идеале, отступы должны быть широкими и одинаковыми со всех сторон — это можно также сделать при помощи любого редактора изображений.
Делаем обводку. Ещё один вариант, если убрать фон не получится — сделать у элементов изображения белую или серую обводку — так они не потеряются при смене фона в dark mode.
Выбор цветов для тёмной темы
Казалось бы, для более предсказуемого инвертирования стоит выбирать как можно более простые цвета: чёрный на белом не испортить, если превратить его в белый на чёрном. Однако высокая контрастность может плохо влиять на восприятие текста, поэтому лучше предпочесть вариации серого.
Это же касается и других цветов текста, например, цвета гиперссылок: классический яркий синий при выборе серой гаммы не будет с ней гармонировать — лучше его приглушить.
Медиазапросы
В почтовых клиентах Apple Mail и Mail.ru можно настроить индивидуальный дизайн для светлой и тёмной темы. Разберём этот способ на примере одного из шаблонов EmailMaker.
Как мы видим, тут изменяются цвета фонов, текстов, линий, а также заменяются картинки логотипа и соцсетей. Как я этого добился?
Первое, что нужно сделать, — дать устройствам получателей понять, что у письма есть версия для тёмной темы. Для этого в HTML-код (между тегами <head> и </head>) нужно добавить следующие метатеги:
<meta name=”color-scheme” content=”light dark”>
<meta name=”supported-color-schemes” content=”light dark”>Оба этих тега указывают веб-браузерам и почтовым клиентам, что у вашего письма есть и светлая, и тёмная версии. Без них будет считаться, что есть только режим light, и сервисы будут отображать письмо как есть — без изменений при переключении темы.
Когда вы задаёте эти теги с параметрами light и dark одновременно, вы сообщаете почтовым клиентам о необходимости включить поддержку тёмного режима — либо через инверсию цветов, либо через кастомные настройки, прописанные в CSS.
Далее, так же в <head>, внутри тега <style> необходимо прописать медиазапрос @media (prefers-color-scheme:dark), а внутри него стили, которые будут применяться в тёмной теме. Пример кода:
<style>
.dark-image {
display: none!important;
}
/* Стили для тёмной темы */
@media (prefers-color-scheme:dark) {
.dark-background {
background-color: #121212!important;
}
.dark-text {
color: #cfcfcf!important;
}
.dark-image {
display: block!important;
}
.light-image {
display: none!important;
}
}
</style>
Указанные классы вроде “dark-background” следует прописать уже в теле письма в атрибуте class у элементов, к которым требуется применить новые стили.
Заметьте, класс dark-image вынесен за пределы стилей для тёмной темы. Поэтому картинка с этим классом в светлой теме будет скрыта. И, соответственно, наоборот, картинка с классом light-image будет скрыта в тёмной теме.
Решение годное.
Жалко, что поддержка очень ограничена. Поэтому тратить достаточно много ресурса на то, что увидят немногие, считаю нецелесообразным. Но если ваша аудитория в основном состоит из яблочников и вы их очень любите — это ваш вариант.
Проблемы с тёмной темой в Gmail и их решение
Тёмная тема в мобильных приложениях Gmail появилась аж в 2019, но некоторые её особенности всё ещё ставят в тупик, в частности, различие в отображении на iOS и Android.
Так, Gmail настаивает на изменении любого светлого цвета текста на тёмный в приложении для iOS. В итоге письмо с белым текстом на чёрном фоне получит чёрный текст на светлом. Это не только кажется абсурдным (наше письмо для тёмной темы принудительно снова делают светлым), но и создаёт реальные проблемы с доступностью и читаемостью.
На самом деле, перед нами стоят две проблемы:
надо сохранить фон тёмным.
и надо сохранить цвет текста светлым.
С фоном всё более менее просто: можно использовать в качестве фона картинку или указать его градиентом. Например:
<td style="background-image:linear-gradient(#121212,#121212);">...</td>А вот с сохранением светлого текста придётся повозиться. Gmail поддерживает CSS Blend Modes, который позволяет описать, как должны меняться цвета элементов при перекрытии. Не буду вдаваться в детали, заинтересованные сами могут почитать источник. Опишу только то, что нужно сделать с вашим шаблоном.
Первое. Объявить классы:
<head>
<style>
u + .body .gmail-blend-screen {
background: #000000;
mix-blend-mode: screen;
}
u + .body .gmail-blend-difference {
background: #000000;
mix-blend-mode: difference;
}
</style>
</head>
Второе. Тегу <body> прописать класс body:
<body style="margin: 0px; padding: 0px;" class="body">...Третье. Обернуть все теги с текстом в два контейнера с классами gmail-blend-screen и gmail-blend-difference.
<div class="gmail-blend-screen">
<div class="gmail-blend-difference">
<div style="font-family: Helvetica, Arial, sans-serif; font-size: 16px; line-height: 21px; color: #fafafa;">От зерна до чашки — выставка «Кофейная Культура» приглашает вас...</div>
</div>
</div>Муторно? Да. Стоит того? Пожалуй. Но решение подходит только для тёмных шаблонов.
Подведем итог: сделать письмо адаптированным к dark mode можно несколькими способами. Кто-то просто загонит картинки на прозрачный фон и успокоится, кто-то пойдёт дальше и пропишет код — правда, делать это для каждого письма довольно запарно, особенно, если вы отправляете много. Для тех, кому лень это делать каждый раз, да ещё и адаптировать к косноязычной тёмной теме Gmail, мы в EmailMaker сделали шаблон — им можно пользоваться бесплатно, достаточно зарегистрироваться в сервисе.
