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

问题描述

在HTML电子邮件的 head 中，紧随 CSS 之后，当设备处于黑暗模式时可以更改电子邮件正文的颜色.

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;
  }
}

仅在Apple Mail应用程序中变成电子邮件正文.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 ，并使其无法在<代码><样式> 工作表.

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屋！