Как использовать dark mode в email-дизайне
Dark mode (тёмный режим) — это не просто модный тренд.
С каждым годом всё больше пользователей читают почту в тёмных интерфейсах:
- в Gmail,
- Apple Mail,
- Outlook,
- мобильных клиентах.
Если ваш дизайн не адаптирован под dark mode, письмо может выглядеть поломанным или плохо читаемым.
В этой статье расскажем, как подготовить письма к тёмному режиму, даже если вы не верстальщик.
Почему важно учитывать dark mode?
✔ Более 50% пользователей включают тёмный режим на смартфоне.
✔ Неподготовленный дизайн может:
— «сломаться» (текст сольётся с фоном),
— потерять фирменные цвета,
— выглядеть непрофессионально.
Как работают почтовые клиенты в dark mode?
Почтовые клиенты адаптируют письма по‑разному:
- Инверсия фона и текста (например, светлый фон → тёмный).
- Частичная замена цветов (системные элементы становятся тёмными, но картинка остаётся).
- Игнорирование CSS-стилей.
Важно: нельзя просто положиться на код — нужно тестировать.
Шаг 1. Используйте прозрачные картинки
✅ PNG с прозрачным фоном выглядят лучше.
❌ JPG с белым фоном может некрасиво «выбиваться» из тёмного режима.
Шаг 2. Задавайте фон явно
В редакторе Letteros:
- задавайте фон блока явно (background-color),
- избегайте «по умолчанию белого» — тёмный режим может перекрасить его в чёрный.
Шаг 3. Проверяйте контраст
- Текст должен быть читаемым на тёмном фоне.
- Избегайте серых текстов на сером фоне.
- Минимальный контраст — 4.5:1 (по стандарту WCAG).
Шаг 4. Тестируйте в разных клиентах
- Gmail (мобильный и десктоп),
- Outlook,
- Apple Mail.
В Letteros есть предпросмотр, а также можно отправить тестовое письмо на свою почту.
Шаг 5. Используйте безопасные цвета
✅ Чёрный (#000), белый (#fff), фирменные насыщенные цвета.
❌ Сложные светлые оттенки часто искажаются.
Шаг 6. Добавьте fallback-решения
Например:
- текстовые альтернативы для изображений,
- запасные стили (например, !important для ключевых цветов).
Заключение
Поддержка dark mode — это не просто «приятный бонус», а норма хорошего email-дизайна в 2025 году.
С Letteros вы можете готовить адаптивные письма для тёмного режима даже без верстальщика, просто используя готовые модули.