Как менять тему письма в зависимости от темы устройства получателя

При вёрстке email-рассылок для разных почтовых клиентов часто возникает задача адаптировать дизайн под системную тему (светлую или тёмную) устройства получателя. Это улучшает читаемость и пользовательский опыт. Рассказываем, как реализовать смену темы письма с помощью CSS и обходных путей для проблемных клиентов.

Основной метод: CSS-медиафункция prefers-color-scheme

Современные почтовые клиенты (Apple Mail, Outlook для Mac, Gmail на iOS/Android) поддерживают медиафункцию prefers-color-scheme. Вы можете определить два набора стилей: для светлой и для тёмной темы.

<style>
  body {
    background-color: #ffffff;
    color: #000000;
  }
  @media (prefers-color-scheme: dark) {
    body {
      background-color: #1a1a1a;
      color: #f0f0f0;
    }
  }
</style>

Этот код автоматически переключает фон и цвет текста, когда пользователь включает тёмную тему на устройстве.

Проблема с Outlook (Windows) и её решение

Outlook для Windows использует движок Word для рендеринга писем и не поддерживает prefers-color-scheme. Более того, он может автоматически инвертировать цвета, что ломает дизайн. Чтобы обойти это, примените условные комментарии MSO (Microsoft Office) и установите явные цвета для фона и текста.

<!--[if mso]>
<style>
  body {
    background-color: #ffffff !important;
    color: #000000 !important;
  }
</style>
<![endif]-->

Также добавьте атрибут data-ogsc и data-ogsb для подавления автоинверсии в Outlook.com и новых версиях Outlook.

Дополнительные приёмы для сложных дизайнов

Если письмо содержит изображения, используйте picture с медиазапросами для подстановки разных картинок под тему. Для фоновых изображений в таблицах задавайте fallback-цвет.

<picture>
  <source srcset="dark-logo.png" media="(prefers-color-scheme: dark)">
  <img src="light-logo.png" alt="Логотип">
</picture>

Не забывайте тестировать письмо в основных клиентах: Gmail, Outlook (Windows/Mac), Apple Mail, Яндекс.Почта.

Проверка поддержки

Перед отправкой обязательно проверьте, как письмо выглядит в тёмной теме в каждом клиенте. Используйте сервисы предпросмотра (Litmus, Email on Acid) или эмуляторы. Помните, что Gmail на вебе и в мобильном приложении может по-разному обрабатывать медиазапросы.

Заключение

Адаптация темы письма под системную тему устройства - это комбинация стандартных CSS-медиафункций и обходных путей для устаревших клиентов. Используйте prefers-color-scheme как основной механизм, добавляйте MSO-хаки для Outlook и тестируйте вручную. Так ваша рассылка будет одинаково хорошо читаться на любом устройстве.