Письмо в темной теме

Три поведения, а не одна темная тема

На сайте вы сами решаете, как выглядит темная тема. В почте за вас решает программа читателя, и у каждого семейства программ свой подход.

Так у одного письма четыре облика: светлый оригинал и эти три. Страница показывает все четыре в ширину компьютера или телефона.

Как строятся превью

Инструмент переписывает каждый цвет, найденный в вашем HTML, будь он во встроенном атрибуте style, в блоке <style> или в старом атрибуте вроде bgcolor. Каждый цвет переводится в тон, насыщенность и светлоту. Тон остается, светлота меняется.

• Частичная инверсия: фон с относительной яркостью выше 0,35 становится темным. Текст и рамки из темной половины шкалы становятся светлыми. Все остальное остается как есть.
• Полная инверсия: светлота отражается для каждого цвета, так что белый становится почти черным, а черный почти белым.
• Без изменений: ничего не переписывается. Если письмо объявляет color-scheme с dark, включаются его правила @media (prefers-color-scheme: dark). Письмо, которое вообще не задает цветов, получает темный фон программы по умолчанию.

Правила для Outlook.com с селекторами [data-ogsc] и [data-ogsb] применяются в частичном превью. Каждое превью работает в изолированном фрейме, где скрипты не выполняются.

Что значат находки

Недостаточный контраст

В каждой версии инструмент сопоставляет каждый видимый фрагмент текста с ближайшим фоном за ним и вычисляет коэффициент контраста. Пары ниже 4,5:1 перечислены, худшие первыми. Ниже 3:1 режим помечается как ошибка. Скрытый текст прехедера пропускается.

Средне-серый текст

Серый с малой насыщенностью и светлотой от 45 до 70 процентов находится в середине шкалы. Инвертируйте его, и получится почти тот же серый, только теперь на противоположном фоне. Для второстепенного текста берите #555555 или темнее.

Темный логотип на прозрачном фоне

Инструмент загружает до 15 изображений и изучает их пиксели. Когда большинство непрозрачных пикселей очень темные, а края прозрачные, логотип растворится на темном фоне. Изображение на непрозрачном белом фоне тоже отмечается, потому что оно покажется белым прямоугольником.

Прозрачность проверить

Сервер изображения не разрешил другому сайту читать его пиксели. Посмотрите темные превью сами.

Настройки темной темы

Показывает, объявляет ли письмо поддержку темной темы и дает ли темные цвета. Объявить поддержку и не дать цветов хуже, чем не объявлять ничего.

Изображения и текст

Письмо, где меньше 120 символов настоящего текста, это в основном картинки, а текст внутри картинок никогда не адаптируется. Отсутствующие атрибуты alt подсчитываются.

Исправления, которые переживут любую программу

Начните с решений, которым не нужен код. Используйте сильные пары, то есть очень темный текст на очень светлом фоне или наоборот: именно средние тона инверсия и губит. Дайте темному логотипу белую обводку в два-три пикселя или поставьте его на белую скругленную подложку внутри файла изображения. Слова оставляйте текстом HTML.

Для рассылки можно затем добавить собственные темные стили для программ, которые их учитывают:

<meta name="color-scheme" content="light dark">
<style>
  :root { color-scheme: light dark; }
  @media (prefers-color-scheme: dark) {
    .card { background-color: #1e1e1e !important; }
    .body-text { color: #f2f2f2 !important; }
  }
</style>

У подписи такой возможности нет. Редактор, куда вы ее вставляете, вырезает <meta> и <style>, и остаются четкие цвета и логотип, который работает на обоих фонах. Наш конструктор подписи может отправить результат прямо на эту страницу.