Дизайн письма для тёмной и светлой темы (Dark/Light mode)

Light mode в email-маркетинге — это версия письма, где контент читается на светлом фоне без потери контраста, а в тёмной теме не «ломается». Ключ: чёткие цвета, предсказуемая инверсия, двойные логотипы, минимальные CSS-переопределения и обязательные тесты в популярных клиентах перед рассылкой клиентам.

Контраст, инверсия и «системные переменные» для Dark/Light mode

Что делает клиент в тёмной теме

• Инвертирует фон и текст (полная/частичная инверсия) — чаще в Gmail и Outlook.com.
• Оставляет inline-цвета нетронутыми или ослабляет их (Apple Mail чаще уважает заданные цвета).
• Может «умно» сохранять логотипы и фото без инверсии, но это непредсказуемо.

Рабочие принципы контраста в Dark/Light mode

• Цель: контраст не ниже 4.5:1 для основного текста и 3:1 для крупных заголовков/иконок.
• Назначайте и фон, и текст явными значениями: background-color и color в каждом модуле, а не «на весь шаблон».
• Избегайте «серого на сером»: в light mode используйте #0B0B0D/#111 для текста, #FAFAFA/#FFF для фона; в dark — #EDEDED для текста на #121212/#1A1A1A.

Про «системные переменные» в письмах

• В браузерах есть prefers-color-scheme и color-scheme, но почтовики трактуют их по-разному.
• CSS-переменные работают ограниченно и часто вырезаются. Делайте плоские, явные цвета.
• Не рассчитывайте на системные токены (Canvas, CanvasText и т. п.) — задавайте собственные палитры.

SVG/PNG, прозрачности и двойные логотипы для Dark/Light mode

Почему два логотипа в Dark/Light mode — это норма

• Логотип фирмы на светлом фоне часто тёмный; на тёмном фоне он должен быть инвертированным (белым) или иметь светлую обводку.
• Для «логотип завода» или сложных знаков без обводки используйте отдельную светлую версию.
• Делайте два файла: logo-light.png и logo-dark.png. Оба — с прозрачным фоном (PNG-24), чтобы не нарушать фон секции.

SVG против PNG в e-mail для Dark/Light mode

• Inline SVG часто режется Gmail/Outlook. Вложенные SVG как поддерживаются не во всех клиентах.
• Надёжнее PNG с ретиной (2x). Для простых иконок — PNG-sprites или отдельные файлы.
• Если нужен SVG (например, в Apple Mail): давайте PNG-фолбэк через с srcset, но учитывайте, что srcset поддерживается ограниченно.

Техники переключения логотипов в Dark/Light mode

• Простой способ: показывать «светлый» логотип всегда, а для тёмной темы класть подложку (темный фон секции фиксирован).
• Продвинутый способ: два и CSS c медиа-условием prefers-color-scheme: dark (где поддерживается), один скрыть display:none. В остальных клиентах — graceful degradation.
• Не используйте auto-invert для логотипа — риск «грязных» цветов, особенно у брендовых оттенков.

Детект темы и минимакс-правила CSS

Базовый паттерн для Dark/Light mode

• По умолчанию верстайте «идеальный» light mode: белые/почти белые фоны, чёрный/почти чёрный текст, явные кнопки.
• Добавьте узкий слой темных переопределений через медиа-условие: @media (prefers-color-scheme: dark) { ... } — для клиентов, которые его уважают (Apple Mail, Outlook для Mac, часть мобильных).
• Минимакс-подход: переопределяйте только критичное — фоны контейнеров, цвет основного текста, логотип, CTA-кнопки. Мелкие элементы оставьте как есть: чем меньше правок, тем меньше конфликтов с автоинверсией.

Практические правила для Dark/Light mode

• color-scheme: light dark; помогает некоторым клиентам решать, инвертировать ли цвета. Но поддержка фрагментарная; тестируйте.
• Инлайн-CSS сильнее. Ключевые цвета (background-color, color, border-color) задавайте инлайном в каждом /.
  Избегайте !important — некоторые клиенты всё равно перетрут их; вместо этого дублируйте значения ближе к элементу.
  Кнопки: делайте фон кнопки сплошным (не градиенты), текст — явный. Для dark-ветки — светлый фон кнопки (#2F80ED на #121212 OK) и высокий контраст текста (#FFF).

  Тесты в популярных клиентах для Dark/Light mode

  Что тестировать в каждом релизе рассылки для Dark/Light mode

  • Контраст текста/кнопок в обеих темах.
  • Состояние логотипа на реальном фоне письма.
  • Фото: не проваливаются ли в «слишком тёмное», нужна ли светлая маска или рамка.
  • Ссылки: цвет/подчёркивание, видимость visited/hover (где есть).

  Матрица поддержки dark/light

  Клиент	Поведение в тёмной теме	prefers-color-scheme	Заметки
  Apple Mail (macOS/iOS)	Уважает ваши цвета, частичная инверсия отключена	Да	Лучший контроль, тестируйте там первым
  Gmail Web	Частичная/полная инверсия	Нет	Инлайн-цвета важны, избегайте бледных серых
  Gmail iOS/Android	Инверсия контента, логотипы иногда сохраняет	Нет	Проверяйте CTA и иконки
  Outlook.com	Инверсия слоёв	Нет	Явные фоны для контейнеров
  Outlook Win (старые движки)	Часто игнорирует многие стили	Нет	Простая таблиц-верстка, минимум декора
  Outlook для Mac (новый)	Ближе к Apple Mail	Да	Работают тёмные переопределения
  Yahoo Mail	Частичная инверсия	Частично	Инлайн-фон для секций

  Анти-паттерны: что ломает Dark/Light mode

  • Серые на полупрозрачном: прозрачности наследуются и в инверсии выглядят «грязно».
  • Градиенты как фон текста: в тёмной теме читаемость падает, а клиенты могут исказить цвета.
  • Текст на изображении без подложки: при автоинверсии изображение не меняется, текст «тонет».
  • SVG-иконки без фолбэка: при вырезании SVG вы теряете навигацию.
  • Один «универсальный» логотип: бренд теряет узнаваемость на тёмном фоне.
  • Слишком тонкие шрифты (300 и тоньше): в dark они визуально «растворяются».
  • Ставить только global CSS в