如何在 Gmail 的响应式电子邮件中使用 @media(首选颜色方案)? [英] How to use @media (prefers-color-scheme) in responsive email in Gmail?

问题描述

以下 CSS 位于 HTML 电子邮件的 head 中，以在设备处于深色模式时更改电子邮件正文颜色.

Following CSS is in head of HTML email to change email body color when the device in dark mode.

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

它只在苹果邮件应用程序中转换电子邮件正文.Gmail 应用程序什么都不做，整个邮件会自动转换为深色方案，这不太好.

It turns body of email only in apple mail app. Gmail app does nothing the entire mail is converted to dark color scheme automatically which is not so good.

如何使 gmail 电子邮件具有暗模式响应功能?为什么上面的标签在 gmail 中不起作用?有什么解决办法吗?

How to make dark-mode-responsive a gmail email? Why the above tag does not work in gmail? Any solutions?

推荐答案

深色模式是电子邮件开发的一种趋势，它为电子邮件呈现更深的调色板，使其更适合低光环境.IOS、Android OS、MacOS Mojave 和更新版本以及 Outlook 2019 中的一些电子邮件客户端支持深色模式.

Dark Mode is a trend in email development to present a darker color palette for email to make it more suitable in low-light environments. Dark Mode is supported by some email clients in IOS, Android OS, MacOS Mojave and newer and Outlook 2019.

启用深色模式后，电子邮件本质上会反转颜色.曾经是白色的背景变暗(通常是十六进制颜色#333，深色的文本变亮.但是，并非所有内容都以预期的方式交换.图像和图块上的背景保持不变，看起来……关闭.更重要的是，没有两个电子邮件客户端采用相同的方法来呈现暗模式，因此需要实施一些创造性的解决方案，以使电子邮件继续按照开发人员的预期呈现.

With Dark Mode enabled, the email in essence inverts colors. Backgrounds that used to be white become dark (usually hexadecimal color #333, text that was dark becomes light. However, not everything swaps in a manner that is expected. Backgrounds on images and tiles remain the same, which looks ... off. To add to the issue, no two email clients are taking the same approach to present Dark Mode, so a few creative solutions need to be implemented so that emails continue to look as expected by the developer.

坏消息是，我们无法通过 @media 查询或为 Gmail 或 Outlook 生成的类名在电子邮件中通过 CSS 专门针对暗模式.Gmail 会替换 <style> 工作表中的颜色值，Outlook 将内联深色模式颜色值并向它们添加 !important 并使其无法在 <style> 表格.

The bad news is that we cannot specifically target Dark Mode via CSS in email via @media query or generated class name for Gmail or Outlook. Gmail replaces color values in the <style> sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the <style> sheet.

解决方案

在 Google 和 Microsoft 提供解决方案之前，最好的方法是接受这是一个现实，并设计出无论用户选择何种背景颜色来查看它们都可以正常工作的电子邮件.越来越多的用户正在采用深色模式，因此它只会在未来变得更加流行.

Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.

祝你好运.

这篇关于如何在 Gmail 的响应式电子邮件中使用 @media(首选颜色方案)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！