Как настроить экспорт HTML-письма с поддержкой тёмной темы
Поддержка тёмного режима (dark mode) — это не просто модный тренд, а необходимость.
Всё больше пользователей читают письма в тёмной теме на своих устройствах, и если ваше письмо не адаптировано, оно может выглядеть некрасиво или стать нечитаемым.
В этой статье расскажем, как правильно подготовить и экспортировать HTML-письмо с учётом dark mode.
Почему нельзя просто экспортировать обычный HTML?
При простом экспорте HTML-кода:
❌ цвета могут быть прописаны только для светлой темы,
❌ почтовые клиенты сами «инвертируют» цвета, что может сломать дизайн,
❌ логотипы и картинки с белым фоном будут смотреться неаккуратно.
Шаг 1. Пропишите цвета явно
- Задавайте фоновый цвет (background-color) и цвет текста (color) в инлайне или в CSS — не полагайтесь на «по умолчанию белый фон».
- Для тёмной темы используйте тёмно‑серые фоны вместо чисто чёрного (#000) — это мягче для глаз.
- Для светлой темы избегайте чисто белого (#fff) — лучше использовать очень светлые оттенки.
Шаг 2. Подготовьте медиа‑запросы для dark mode
В CSS можно добавить:
@media (prefers-color-scheme: dark) {
body {
background-color: #121212 !important;
color: #ffffff !important;
}
.button {
background-color: #ffffff !important;
color: #121212 !important;
}
}
Важно: не все почтовые клиенты поддерживают эти медиа‑запросы, поэтому полагаться только на них нельзя — нужен fallback.
Шаг 3. Используйте прозрачные картинки
- Логотипы и иконки лучше готовить в формате PNG с прозрачным фоном.
- Если картинка вставлена с белым фоном, в тёмной теме она может смотреться как некрасивое «пятно».
Шаг 4. Проверьте контраст
- Текст должен быть читаемым на тёмном фоне (не светло‑серый на тёмно‑сером).
- Кнопки должны быть заметными, но не «вырвиглазными».
Шаг 5. Экспортируйте HTML с инлайновыми стилями
В Letteros:
- используйте экспорт с инлайном — чтобы стили были встроены прямо в HTML, а не подключались внешне.
- Проверьте, чтобы все классы и элементы, связанные с цветами, были явно прописаны.
Шаг 6. Протестируйте письмо
- Отправьте тест себе на Gmail, Outlook, Apple Mail.
- Включите и выключите dark mode на устройстве.
- Проверьте на мобильном и десктопе, чтобы убедиться, что всё отображается корректно.
Заключение
Экспортировать HTML-письмо с поддержкой тёмной темы — это не только вопрос дизайна, но и вопрос уважения к подписчикам.
Правильно подготовленное письмо будет красиво смотреться в любом режиме, повышая вовлечённость и доверие.