Email в dark mode: как сделать, чтобы не сломалось

Больше половины пользователей держат тёмную тему включённой постоянно. Ваше белоснежное письмо в их inbox превращается в нечто непредсказуемое: инвертированные цвета, исчезающий текст, логотип на чёрном квадрате. Каждый почтовый клиент обрабатывает dark mode по-своему, и единого стандарта нет. В этом руководстве - конкретные решения для каждого случая.

Масштаб проблемы: кто видит ваши письма в тёмном режиме

По данным Android Authority за 2025 год, около 82% пользователей Android используют тёмную тему. На iOS - порядка 70%. На десктопе цифры скромнее, но macOS и Windows предлагают системный тёмный режим, и Outlook, Apple Mail, Thunderbird подхватывают его автоматически.

Это значит, что большинство подписчиков видят ваши рассылки не так, как вы их проектировали. Белый фон становится тёмно-серым или чёрным. Тёмный текст меняет цвет на светлый. Логотип, нарисованный на белой подложке, торчит ярким прямоугольником посреди тёмного фона. И всё это происходит без вашего ведома, потому что почтовый клиент решает сам, как именно инвертировать цвета.

Проблема усугубляется тем, что нет единого механизма. Три крупнейших email-клиента обрабатывают dark mode тремя разными способами. И email-верстальщику приходится учитывать все три.

Три модели рендеринга: как клиенты инвертируют письма

Первая модель - без изменений. Клиент не трогает ваш HTML и CSS. Письмо выглядит ровно так, как вы его сверстали. Так работают некоторые версии Yahoo Mail и AOL. Проблем нет, но если у вас белый фон, подписчик получает ослепительный прямоугольник в тёмном интерфейсе.

Вторая модель - частичная инверсия. Клиент меняет только светлые фоны на тёмные, а цвета текста подстраивает под новый фон. Если у вас уже тёмный фон - оставляет как есть. Так работает Apple Mail. Это самый аккуратный подход, и с ним обычно меньше всего проблем. Но он всё равно может сломать элементы, цвет которых вы задали через inline-стили с конкретными hex-значениями.

Третья модель - полная инверсия. Клиент переписывает все цвета: фоны, текст, ссылки, границы. Outlook (Windows и мобильный) делает это агрессивно. Gmail для Android тоже применяет собственную палитру. Результаты непредсказуемы. Белый текст на белом фоне, тёмная кнопка на тёмном фоне, исчезающие разделители - всё это побочные эффекты полной инверсии.

Gmail заслуживает отдельного упоминания, потому что ведёт себя по-разному в зависимости от платформы. На вебе Gmail не инвертирует письма вообще - показывает как есть. На Android в тёмном режиме применяет собственную перекраску. На iOS - иногда инвертирует, иногда нет, зависит от версии приложения. Тестировать одного Gmail мало - нужно тестировать Gmail на каждой платформе отдельно.

Что ломается чаще всего

Логотипы. Самая частая жертва. Если логотип - JPEG или PNG с белым фоном, в тёмном режиме он выглядит как белая заплатка. Решение очевидное: PNG с прозрачным фоном. Но этого мало. Если логотип тёмного цвета на прозрачном фоне, после инверсии он растворится в тёмном фоне письма. Нужна либо светлая обводка, либо два варианта логотипа - для светлой и для тёмной темы.

Кнопки CTA. Если кнопка сверстана через background-color с тёмным цветом, а текст внутри - белый, инверсия может перекрасить фон в светлый, а текст оставить белым. Результат: невидимая надпись на кнопке. Или наоборот - тёмный текст на тёмной кнопке.

Разделители и границы. Тонкая серая линия на белом фоне - классический способ разбить письмо на блоки. После инверсии серая линия может стать невидимой на тёмном фоне. Или превратиться в белую полосу, которая выглядит грубо.

Иконки. SVG в email почти не поддерживается, поэтому иконки обычно растровые. Чёрная иконка на прозрачном фоне в тёмном режиме исчезает. Как и с логотипом - нужна либо обводка, либо подложка, либо альтернативная версия.

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

CSS-подход: media query и его ограничения

В теории @media (prefers-color-scheme: dark) решает всё. Вы задаёте альтернативные стили для тёмной темы, и клиент их применяет. На практике этот media query поддерживается полноценно только в Apple Mail и отчасти в Outlook для macOS. Gmail его полностью игнорирует. Outlook для Windows - тоже. Samsung Mail - частично.

Это означает, что media query - полезный инструмент, но не стратегия. Нельзя написать стили для тёмной темы через prefers-color-scheme и считать задачу решённой. Более половины аудитории не увидит этих стилей. Стратегия должна строиться от обратного: сначала убедитесь, что письмо выглядит приемлемо при любой инверсии без специальных стилей. Потом добавьте media query как улучшение для клиентов, которые его поддерживают.

Практический паттерн: в блоке <style> пишете правила для тёмной темы, а для клиентов без поддержки media query полагаетесь на inline-стили, которые переживают инверсию без катастрофических последствий. Два слоя защиты вместо одного.

Конкретные решения для типичных проблем

Логотип. Подготовьте два варианта: для светлой темы и для тёмной. Через media query показывайте нужный. Для клиентов без поддержки media query используйте версию с прозрачным фоном и добавьте тонкую полупрозрачную обводку - она не видна на светлом фоне, но создаёт контур на тёмном. Другой вариант - задать background-color для ячейки с логотипом. Даже если клиент инвертирует фон вокруг, ячейка сохранит свой цвет.

Кнопки. Не используйте чисто белый или чисто чёрный фон для кнопок. Яркие цвета - синий, зелёный, оранжевый - выживают при инверсии лучше. Клиент может скорректировать оттенок, но кнопка останется видимой и контрастной. Текст внутри кнопки задавайте явно через inline-стиль color. Не полагайтесь на наследование - при инверсии оно ведёт себя непредсказуемо.

Фоновые цвета. Откажитесь от чисто белого #ffffff в качестве фона письма. Используйте #f5f5f5 или #fafafa. Визуально разница минимальна, но некоторые клиенты (Apple Mail) инвертируют только #ffffff, оставляя близкие оттенки без изменений. Это даёт вам контроль: фон не станет чёрным, а останется светло-серым или будет инвертирован более мягко.

Текст. Всегда задавайте цвет текста явно. Каждый <td>, каждый <p>, каждый <a> должен иметь inline color. Если цвет не указан, клиент назначит свой. В большинстве случаев это не страшно, но бывают ситуации, когда Outlook меняет цвет текста, не трогая фон, и получается светлый текст на светлом.

Изображения с текстом. Текст, вшитый в картинку, не инвертируется. Если на баннере нарисован белый текст на тёмном фоне - всё будет хорошо. Если чёрный текст на светлом - тоже, потому что картинка не перекрашивается. Но текст в изображении недоступен для скринридеров, не масштабируется и не индексируется. Используйте этот приём только для декоративных элементов, не для контента.

Outlook: отдельная головная боль

Outlook для Windows использует движок Word для рендеринга HTML. Это создаёт множество проблем само по себе, а в тёмном режиме добавляет ещё одну: собственный мета-тег [data-ogsc] и [data-ogsb] для перезаписи цветов. Outlook подставляет эти атрибуты к элементам и через них меняет цвет текста (ogsc - original style color) и фона (ogsb - original style background).

Можно бороться с этим через мета-тег <meta name="color-scheme" content="light dark"> и CSS-свойство color-scheme: light dark. Это сообщает Outlook, что вы осведомлены о тёмном режиме и хотите управлять цветами самостоятельно. Outlook может учесть это и не применять принудительную инверсию. «Может» - ключевое слово. Поведение зависит от версии, и гарантий нет.

Практический совет: если какой-то элемент критично ломается в Outlook dark mode, оберните его в условный комментарий <!--[if mso]> и задайте отдельные стили для Outlook. Это старая техника, но она по-прежнему работает. Другой подход - использовать VML-кнопки для Outlook, которые рендерятся через Word и не подвержены CSS-инверсии.

Тестирование: без него всё остальное бессмысленно

Нельзя предсказать, как будет выглядеть письмо в тёмном режиме, просто посмотрев на код. Нужно видеть рендер. Litmus и Email on Acid показывают превью в десятках клиентов, включая dark mode варианты. Это платные инструменты, но для профессиональной рассылки они необходимы.

Минимальный набор для ручного тестирования: Gmail на Android с тёмной темой, Apple Mail на iPhone с тёмной темой, Outlook для Windows. Эти три клиента покрывают три модели рендеринга и дают представление о том, где ломается вёрстка. Если письмо выглядит прилично во всех трёх - в остальных клиентах, скорее всего, тоже будет нормально.

Тестируйте не только визуал. Проверяйте читаемость текста, видимость кнопок, контрастность ссылок. Попросите коллегу открыть письмо на телефоне в тёмном режиме и сказать, что он видит. Свежий взгляд находит проблемы, которые верстальщик уже не замечает после третьего часа правок.

Чек-лист: dark mode без сюрпризов

Ошибки, которые встречаются постоянно

Полагаться только на media query. Половина аудитории не увидит ваших стилей для тёмной темы. Если письмо выглядит прилично только с prefers-color-scheme, без него оно ломается. Стратегия должна работать в обе стороны.

Игнорировать dark mode целиком. «У нас нет ресурсов на поддержку тёмной темы» - типичный аргумент. Но поддержка не требует переверстки с нуля. Замена белого фона на #fafafa, добавление прозрачных PNG и явных inline-цветов - это час работы, который спасает письмо для большинства подписчиков.

Тестировать только в одном клиенте. «Я проверил в Apple Mail, выглядит нормально» - означает, что вы проверили один из трёх сценариев. Gmail и Outlook обработают это письмо совершенно иначе.

Использовать скриншоты вместо живого текста. Баннер-картинка не инвертируется, и это кажется преимуществом. Но текст в картинке невидим для скринридеров, не масштабируется на мобильных и увеличивает вес письма. Плюс - Gmail обрезает письма тяжелее 102 КБ. Три тяжёлых баннера, и подписчик видит обрубок с предложением «показать целиком».

Дизайн не спасёт, если письмо не дошло

Можно идеально поддержать тёмную тему, сделать адаптивную вёрстку, пройти все тесты в Litmus. Но если 30% базы - невалидные адреса, bounce rate убьёт репутацию домена, и ESP начнёт фильтровать ваши рассылки. Письмо не дойдёт ни в светлом режиме, ни в тёмном.

Доставляемость и дизайн - два слоя одной задачи. Дизайн отвечает за то, что увидит подписчик, когда откроет письмо. Доставляемость отвечает за то, чтобы он вообще его получил. Без второго первый не имеет смысла. Валидация базы перед рассылкой - такая же часть подготовки, как тестирование вёрстки в разных клиентах.

Вы потратили три часа на поддержку тёмной темы. Потратьте три минуты на проверку базы. Иначе эти три часа ушли в пустоту для трети ваших адресов.