Как использовать @media (предпочитает цветовую схему) в отзывчивой электронной почте в Gmail?

Question

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

@media (prefers-color-scheme: dark) {
  .white-cont {
    background: red !important;
  }
}

Превращает тело письма только в приложение apple mail. Приложение Gmail ничего не делает, вся почта автоматически конвертируется в темную цветовую схему, что не очень хорошо.

Как сделать отзывчивым на темную моду электронную почту Gmail? Почему вышеупомянутый тег не работает в Gmail? Любые решения?

Answer 1

Dark Mode - тенденция в разработке электронной почты, которая представляет более темную цветовую палитру для электронной почты, чтобы сделать ее более подходящей в условиях низкой освещенности. Темный режим поддерживается некоторыми почтовыми клиентами в IOS, Android ОС, MacOS Mojave и новее и Outlook 2019.

При включенном темном режиме электронная почта по сути инвертирует цвета. Фоны, которые раньше были белыми, становятся темными (обычно шестнадцатеричный цвет # 333, темный текст становится светлым. Однако не все меняется так, как ожидается. Фоны на изображениях и мозаиках остаются прежними, что выглядит ... выключенным. Чтобы добавить к этому, ни один из двух почтовых клиентов не использует один и тот же подход к представлению Dark Mode, поэтому необходимо внедрить несколько креативных решений, чтобы разработчики продолжали выглядеть так, как ожидал разработчик.

Плохие новости заключается в том, что мы не можем специально настроить таргетинг на темный режим через CSS в электронном письме с помощью запроса @media или сгенерированного имени класса для Gmail или Outlook. Gmail заменяет значения цвета на листе <style>, а Outlook вставляет значения цвета в темном режиме и добавляет !important для них и делает невозможным переопределить его в листе <style>.

Решение

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

Удачи.