Всё больше пользователей включают темную тему в своих почтовых приложениях — для комфорта при чтении ночью или в условиях низкой освещённости. Но почтовые клиенты по-разному обрабатывают письма в тёмном режиме: кто-то оставляет дизайн без изменений, кто-то инвертирует цвета, а кто-то применяет собственные алгоритмы.
Если не учитывать эти особенности при создании рассылок, письма могут стать нечитаемыми: белый текст на белом фоне, логотипы сливаться с фоном, кнопки терять контрастность.
💡 Цель этого гайда — помочь вам создавать рассылки, которые выглядят хорошо в любом режиме: светлом и тёмном.
Как почтовые клиенты обрабатывают темную тему
Разные сервисы подходят к темному режиму по-разному:
-
Не изменяют письмо — например, стандартный почтовый клиент для iOS меняет только интерфейс приложения, оставляя цветовую схему письма без изменений.
-
Частично инвертируют цвета — светлые элементы становятся тёмными, а тёмные или чёрные блоки остаются без изменений. Так работают некоторые версии Яндекс.Почты.
-
Полностью адаптируют письмо — применяют сложные алгоритмы для изменения всех элементов под тёмный режим. Например, так делает Gmail.
⚠️ Поддержка темного режима зависит от почтового клиента и его версии. Рекомендуем регулярно проверять актуальную информацию в документации провайдеров.
Практические рекомендации
1. Используйте контрастные цвета
Выбирайте цветовые схемы, которые остаются читаемыми при инверсии. Тестируйте письма в тёмном режиме и составьте таблицу своих стандартных цветов с учётом того, как они преобразуются.
*Отличный пример цветовых схем. Источник: *emailmatrix.ru
📌 Пример хорошей практики: если в светлом режиме вы используете тёмно-синий фон с белым текстом, в тёмном режиме этот фон может стать слишком светлым — заранее предусмотрите альтернативные варианты.
2. Загружайте изображения с прозрачным фоном
Логотипы, кнопки и другие элементы, созданные как картинки, рекомендуется сохранять в формате PNG с прозрачным фоном. Добавьте контрастную обводку или тень, чтобы элементы оставались видимыми в обоих режимах.
💡 С обводкой логотип читается одинаково хорошо и в светлой, и в тёмной теме.
3. Увеличьте размер текста
Мелкий текст сложнее читать в тёмном режиме из-за снижения контрастности. Если в письме есть крупные текстовые блоки, протестируйте их отображение в обоих режимах и при необходимости увеличьте шрифт.
Рекомендуемый минимальный размер:
-
Основной текст: 14–16 пт
-
Заголовки: 18–24 пт
-
Подписи и примечания: не менее 12 пт
4. Используйте медиазапросы (для кастомных шаблонов)
Если вы редактируете HTML-код шаблона, можно добавить медиазапросы для адаптации под тёмный режим. Вот основные примеры:
Изменение цветов для тёмной темы:
@media (prefers-color-scheme: dark) {
body {
background-color: #333333;
color: #ffffff;
}
.section {
background-color: #222222;
border: 1px solid #555555;
}
}
Инвертирование цветов:
@media (prefers-color-scheme: dark) {
body {
filter: invert(100%);
}
.logo {
filter: invert(0%);
}
}
Подсветка ссылок:
@media (prefers-color-scheme: dark) {
a {
color: #ff9900;
}
a:hover {
color: #ffa500;
}
}
⚠️ Не все почтовые клиенты поддерживают медиазапросы. Используйте их как дополнительный слой оптимизации, но не полагайтесь на них полностью.
Обязательное тестирование
Перед отправкой массовой рассылки проверьте, как письмо выглядит:
-
В разных почтовых клиентах (Gmail, Яндекс.Почта, Mail.ru, Outlook)
-
На разных устройствах (десктоп, мобильные телефоны, планшеты)
-
В обоих режимах — светлом и тёмном
Если у вас нет возможности протестировать письмо вручную на всех платформах, используйте сервисы предпросмотра вроде Провидицы в DashaMail — они показывают, как письмо будет выглядеть в различных почтовых клиентах.
Краткий чек-лист
✅ Проверьте контрастность текста и фона
✅ Используйте изображения с прозрачным фоном и обводкой
✅ Увеличьте размер шрифта для основных блоков текста
✅ Протестируйте письмо в тёмном режиме перед отправкой
✅ Для кастомных шаблонов добавьте медиазапросы (опционально)
Нужна помощь с тестированием?
Если не уверены, как письмо отобразится в тёмном режиме, или хотите проверить рассылку перед отправкой — напишите в поддержку: support@dashamail.ru или через чат в личном кабинете.