Письмо-дайджест: конфликт цвета логотипа и фона (светлая/тёмная тема)

[ToddZ]

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

Однако, когда я получаю дайджест (в приложении Gmail) на iPhone с включённым тёмным режимом устройства, область фона логотипа инвертируется в белый (или близкий к белому), из-за чего логотип становится почти невидимым:

На рабочем столе я могу предпросмотреть тёмный режим через инструменты разработчика Chrome. Он не инвертирует цвет фона логотипа в белый. Но при этом он подменяет мой логотип по умолчанию («светлый режим»), из-за чего он тоже становится почти невидимым:

Это меня сильно запутало… Я не знаю, вижу ли я баг или у меня неверные ожидания относительно работы тёмного режима на мобильных устройствах…

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

[simon]

@ToddZ

Однако, когда я получаю дайджест (в приложении Gmail) на iPhone в режиме тёмной темы устройства, область фона логотипа инвертируется в белый (или близкий к белому), из-за чего логотип становится почти невидимым:

Подтвердите, пожалуйста: вносили ли вы какие-либо изменения в HTML-шаблон электронных писем Discourse, который находится в разделе Администрирование → Настройка → Стиль электронной почты? Также добавляли ли вы какой-либо CSS во вкладку CSS на той же странице?

Кроме того, включена ли на вашем сайте настройка «Применять пользовательские стили к дайджесту»? Эта настройка включена по умолчанию.

Допустим, что любые внесённые вами настройки не являются причиной проблемы. В таком случае, вероятно, происходит следующее: плейсхолдер %{dark_mode_styles}, присутствующий в шаблоне писем Discourse по умолчанию, заменяется на CSS, добавляемый следующим методом:

app/helpers/email_helper.rb

Этот метод добавляет в шаблон следующий CSS:

[dm='header'] {
  background: #151515 !important;
}

Данный CSS предназначен для того, чтобы заголовок дайджеста был тёмным при просмотре письма на устройстве с включённой тёмной темой. Однако возможно, что некоторые устройства игнорируют директиву !important и отображают инвертированный цвет.

Мне не удалось воспроизвести эту проблему на моём Android-смартфоне. У меня нет iPhone для тестирования. Возможно, кто-то другой сможет проверить просмотр сводного письма в тёмной теме на iPhone?

[ToddZ]

Привет, Саймон — спасибо за ответ.

@simon

Вносили ли вы какие-либо изменения в HTML-шаблон электронных писем Discourse, который находится в разделе Администрирование / Настройка / Стиль электронной почты? Также добавляли ли вы какой-либо CSS во вкладку CSS на той же странице?

Кроме того, включена ли на вашем сайте настройка «Применять пользовательские стили к дайджесту»? Эта настройка включена по умолчанию.

Я не трогал пользовательский HTML или CSS шаблона электронных писем. Я отключил настройку «Применять пользовательские стили к дайджесту», но, как и ожидалось, это не дало эффекта.

Я с радостью отправлю сводное письмо, если кто-то захочет — просто опубликуйте или отправьте мне в личные сообщения адрес…

[simon]

Мне приходят письма с сайта. В приложении Gmail на Android в тёмной теме они отображаются корректно. У меня нет устройства на iOS для тестирования.

На устройстве iOS у @ToddZ результат одинаковый независимо от того, включена ли настройка применять пользовательские стили к дайджесту:

Мое предположение: приложение Gmail на iOS до сих пор не поддерживает медиа-запрос prefers-color-scheme: Can I email… @media (prefers-color-scheme). На этой странице также указано, что Android не поддерживает его, но для меня письма в Gmail на Android отображаются корректно.

Отчасти по теме: стоит где-то отметить, что для применения тёмной CSS-стили к шаблону письма необходимо включить настройку применять пользовательские стили к дайджесту.

@isaac, не уверен, что вы всё ещё занимаетесь этим вопросом. Возможно, стоит проверить, как Gmail на iOS обрабатывает это. Особенно в случае, когда тема по умолчанию на сайте Discourse использует тёмную цветовую схему.

[ToddZ]

Интересно, я только что заметил довольно похожую проблему с письмом-приглашением в Windows. (На iOS оно выглядит нормально.)

Это Windows 11 22H2 и Thunderbird с системной темой (использует настройки светлой/тёмной темы ОС).

Windows в тёмном режиме:

(В светлом режиме всё выглядит хорошо.)

[simon]

Если у вас будет возможность, попробуйте отправить тот же email с включённой настройкой сайта apply custom styles to digest. Влияет ли эта настройка на отображение письма в тёмной теме в Thunderbird?

Также проверьте ещё раз, не редактировался ли шаблон письма, находящийся в разделе Администрирование / Настройка / Стиль письма. Если он не редактировался, кнопка «Сбросить к значениям по умолчанию» на этой странице будет неактивна:

Меня интересует, присутствуют ли в шаблоне ключи dark_mode_meta_tags и dark_mode_styles, которые я выделил на скриншоте выше.

[ToddZ]

Конечно — я только что проверил:

• Стиль письма: HTML и CSS находятся в состоянии по умолчанию и никогда не изменялись. В HTML содержатся мета-теги для тёмной темы.
• применить пользовательские стили к дайджесту: не имеет значения, включено или выключено.

[simon]

Я подозреваю, что причина проблемы описана в разделе «Режим по умолчанию: инверсия всех цветов» этой публикации: Dark Mode for Email: The Definitive Guide for Marketers.

Инверсия всех цветов — это самая радикальная цветовая схема: она инвертирует не только области со светлым фоном, но и затрагивает темные фоны.

Таким образом, если вы уже создали свои письма с темной темой, эта схема, парадоксальным образом, заставит их стать светлыми. К сожалению, именно эту тактику в настоящее время используют некоторые из наиболее популярных почтовых клиентов, такие как приложение Gmail (iOS), Outlook 2021 (Windows), Office 365 (Windows) и почтовый клиент Windows.

Пример из той публикации, иллюстрирующий проблему, совпадает с тем, о чем вы сообщаете:

Кто-то с доступом к учетной записи Litmus в Discourse должен протестировать это. Чтобы воспроизвести проблему, попробуйте отправить сводное письмо в Litmus с сайта Discourse, у которого цветовая палитра темы по умолчанию установлена на темную схему.

Если это вызовет проблему, простым решением будет всегда использовать светлую цветовую схему для писем, независимо от цветовой палитры, назначенной теме по умолчанию в Discourse. Также в разделе «Целевая настройка для Gmail iOS и Outlook Windows» публикации, на которую я сослался, предложен подход, который потенциально может сработать. Однако это своего рода «костыль».

Тот, кто займется этим вопросом, также может обратить внимание на то, как сейчас необходимо включать настройку сайта «Применять пользовательские стили к сводке» для добавления поддержки темного режима в почтовых клиентах, которые действительно поддерживают его. В интерфейсе Discourse ничего не указывает на то, что эта настройка связана с поддержкой темного режима.

[ToddZ]

Вау, да, функция Full Color Invert действительно соответствует тому, что я наблюдаю, по крайней мере в сводке/дайджесте в iOS Gmail.

Сейчас у меня нет времени, чтобы разобрать всю статью и найти подходящие обходные пути, но в конечном итоге мне придётся что-то попробовать. Тред на GitHub с примерами Gmail открыт с 2019 года, предложено несколько обходных решений, но нет никаких указаний на то, что базовое поведение будет изменено.

Надеюсь, команда Discourse сможет внести некоторые общие корректировки для унификации внешнего вида на всех платформах.

[simon]

Судя по дайджест-письмам, которые я видел с вашего сайта, я предполагаю, что у вашего сайта тёмная цветовая схема по умолчанию. В этом случае вы можете исправить проблему с цветом фона заголовка в приложении Gmail для iOS, добавив следующий код на вкладку CSS в разделе Администрирование / Настройка / Стиль письма:

.digest-header {
    background-image: linear-gradient(#111, #111);
}

Обратите внимание, что оба цвета в linear-gradient должны быть одинаковыми. Они должны соответствовать значению, установленному для цвета «фон заголовка» в палитре цветов вашей темы по умолчанию:

Я считаю, что этот подход подходит только для сайтов, у которых тёмная цветовая схема установлена по умолчанию. Подробное объяснение того, почему это работает, можно найти здесь: Investigating activity summary email dark mode issues.