然而,这种方法有一个很大的警告。并非所有电子邮件客户端都支持媒体查询 ( )。它仅适用于使用 WebKit 作为渲染引擎的客户端。截至撰写本文时,CSS 。有关最新信息,请查看上的此资源。 理论上,您可以使用 来“覆盖”深色模式并强制其使用浅色背景颜色。但是,如果您打算花时间尝试强制使用白色背景,那么您也可以设计深色模式体验。另外,如前所述,此 CSS 查询并不适用于每个电子邮件客户端。
最后,值得注意的是,该媒体查询也可以以其他方式工作。如果您开始使用具有较暗主题的电子邮件,则可以使用定义浅色模式查看的样式。 标志和图像当您想要显 WhatsApp号码数据 示针对暗模式电子邮件优化的特定图像时,媒体查询会派上用场。这种技术有时被称为“深色模式图像交换”。为了实现这一点,您实际上需要包含两个相互堆叠的图像版本。 假设您有两个版本的徽标:浅色模式的正常设计和将文本颜色从黑色反转为白色的深色模式版本。您希望在使用深色模式时隐藏正常徽标,以便显示深色模式优化徽标。

透明背景的普通徽标 透明背景的普通徽标 暗模式电子邮件的反向文本徽标 针对深色模式优化的徽标 如果我们想在深色和浅色模式下显示不同的徽标,代码可能如下所示:首选颜色方案上的电略深色模式徽标。使用 Outlook,您还可以使用标签在深色或浅色模式下隐藏元素。 当然,并不是每个电子邮件客户端都支持这样的暗模式定位。因此,您还应该尝试优化您的正常徽标,以便在黑暗模式下查看。首先,一定要使用透明的PNG。然后,尝试以下选项之一以确保徽标(或任何图形)在深色模式下可见。