Коротко: менять сам Subject письма в зависимости от тёмной/светлой темы устройства получателя нельзя — заголовок задаётся на момент отправки и клиент не меняет его автоматически. Зато можно сделать так, чтобы само тело письма автоматически переключалось между светлой и тёмной версией у получателя — для этого используют CSS media‑query prefers-color-scheme и дополнительные приёмы для тех клиентов, которые не поддерживают её.
Что нужно знать и сделать
1) Subject (тема письма)
- Нельзя динамически менять в зависимости от темы устройства получателя. Subject — часть заголовков сообщения, она формируется на сервере при отправке и не «реагирует» на тёмную/светлую тему клиента.
2) Оформление письма (тело) — принцип
- Сделайте «по умолчанию» светлую версию (так надёжнее для клиентов без поддержки).
- Включите CSS с @media (prefers-color-scheme: dark) для переопределения цветов/картинок при тёмной теме.
- Добавьте мета-теги (для Apple Mail) и используйте стратегии замены изображений/логотипов, чтобы избежать некрасивых инверсий.
3) Пример базовой структуры (упрощённо)
(вставьте в <head> вашего HTML-письма)
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
/* базовые (светлые) стили */
body { background-color:#ffffff; color:#111111; }
.logo-dark { display:none; max-height:0; overflow:hidden; }
/* тёмная тема — пока поддерживается не во всех клиентах */
@media (prefers-color-scheme: dark) {
body { background-color:#0b0b0b !important; color:#e6e6e6 !important; }
a { color:#8ab4ff !important; }
.logo-light { display:none !important; max-height:0 !important; overflow:hidden !important; }
.logo-dark { display:block !important; max-height:none !important; overflow:visible !important; }
/* дополнительные переопределения для кнопок/фоновых блоков и т.п. */
}
</style>
Внутри письма используйте два варианта логотипа/картинок:
<img src="logo-light.png" alt="logo" class="logo-light" style="display:block;">
<img src="logo-dark.png" alt="logo" class="logo-dark" style="display:none;">
4) Особенности и рекомендации
- Поддержка сильно варьируется между клиентами:
- Хорошо поддерживают: Apple Mail (iOS/macOS), некоторые мобильные клиенты (зависит от версии).
- Плохая/отсутствует: классический Outlook на Windows (Word‑рендерер), многие веб‑клиенты могут применять собственную автоматическую инверсию.
- Gmail/Outlook Web/мобильные версии постепенно добавляют/улучшают поддержку — проверяйте актуальную матрицу поддержки (Litmus/Email on Acid).
- Для Outlook на Windows используйте условные комментарии <!--[if mso]>…<![endif]-->: туда можно поместить версию, которую Outlook точно покажет (обычно светлую).
- Избегайте «жёстко» встраиваемого текста на картинках — при тёмной инверсии он может стать нечитаем. Лучше:
- использовать SVG с возможностью менять цвет через currentColor или CSS,
- или иметь два варианта изображений (светлый/тёмный) и переключать их медиа‑запросом;
- либо делать лого прозрачным PNG на подходящем фоне.
- Используйте CSS‑переменные, чтобы менять цвета централизованно (если клиент поддерживает).
- Добавьте свойство color-scheme / meta-теги (как в примере) — Apple Mail учитывает их, это предотвращает агрессивную автоматическую инверсию.
- Тестируйте в реальных клиентах и в сервисах (Litmus, Email on Acid) — это критично, потому что поведение сильно разное.
5) Резюме практических шагов
- Сделать светлую версию по умолчанию.
- Добавить CSS @media (prefers-color-scheme: dark) в head для переопределения цветов/фоновых блоков/кнопок.
- Подготовить альтернативные изображения/лого и переключать их через CSS; для Outlook использовать MSO‑условия.
- Добавить meta name="color-scheme" / "supported-color-schemes" для Apple Mail.
- Тщательно протестировать по списку клиентов.
Если хотите, могу:
- прислать готовый рабочий шаблон письма с примерами для логотипов, кнопок и background-image;
- проверить конкретный код и подсказать правки под поддержку популярных клиентов.