具有深色模式的 HTML 电子邮件的背景图像支持答案

【问题标题】：background-image support for HTML Emails with dark mode具有深色模式的 HTML 电子邮件的背景图像支持
【发布时间】：2022-11-29 10:17:55
【问题描述】：

这个问题是关于 HTML 电子邮件通知深色或浅色模式的。

我无法让 background-image 正常工作以使 css 类显示白色徽标或黑色徽标，具体取决于查看电子邮件的人在其应用程序或操作系统上的模式偏好。

这是我的代码...

:root {
  color-scheme: light dark;
  supported-color-schemes: light dark;
}

@media (prefers-color-scheme: dark) {
  .logo {
    background: url(logo-dark.png) center center no-repeat;
  }
}

@media (prefers-color-scheme: light) {
  .logo {
    background: url(logo-light.png) center center no-repeat;
  }
}

.logo {
  display: block;
  height: 42px;
  width: 162px;
}

我在浅色和深色媒体查询中有其他 css 类，它们相应地调整颜色。这真的只是 background-image 属性给我带来了麻烦。

有没有人经历过这个？有什么想法吗？在此先感谢您的帮助。

【问题讨论】：

url(logo-dark.png) 是相对 URL。您希望它解析到什么绝对 URL？

标签： html css html-email mode

【解决方案1】：

很好的问题。

我有几篇来自电子邮件专家的文章为您添加了书签！

Remi Parmentier 的这个解决方案利用 <picture> 和 <source ... media="(prefers-color-scheme:dark)">（Apple Mail 支持）来换掉 <img>。我不确定这是在 Apple Mail Privacy Protection 之前还是之后，它积极地缓存图像，但无论如何它应该可以工作。 https://codepen.io/hteumeuleu/pen/porJdjR?editors=1000

它的核心：

<div style="margin:auto; text-align:center; width:205px; height:165px;" class="email-picture">
        <picture>
            <source srcset="https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-dark.png" media="(prefers-color-scheme:dark)" />
            <img src="https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-light.png" width="205" height="165" alt="DuckDuckGo" style="vertical-align:middle; max-width:100%; height:auto; font:1em sans-serif; color:#000;" />
        </picture>
    </div>

另请注意元标记的使用，这可能是您的标记不起作用的另一个原因。一定要包括它们。

<meta name="color-scheme" value="light dark" />
<meta name="supported-color-schemes" content="light dark" />

这一个还包括 Outlook.com 暗模式的样式：

<style id="css-dark-mode-outlook-com">
    [data-ogsb] { color:#fff !important; background-color:#1c1c1c !important; }
    [data-ogsb] .email-picture { background:url('https://www.hteumeuleu.fr/wp-content/uploads/2021/10/ddg-logo-dark.png') no-repeat center; background-size:contain; }
    [data-ogsb] .email-picture img { visibility:hidden; }
</style>

第二篇文章解释了 html 标签 picture、source 和 img 的使用，在 HTML 电子邮件的上下文中：https://www.goodemailcode.com/email-enhancements/picture

请注意，对<picture> 的支持是有限的，但是对@media prefers-color-scheme 的支持也是如此。查看https://www.caniemail.com/了解详情。

你也可以考虑给你的后备/正常标志一个白色（或你的背景颜色）描边或柔和的“外发光”（透明），这样它可以在那些自动化的电子邮件客户端上看到 - 但不要让你控制 - 黑暗模式颜色变化。有关所有黑暗模式的更多详细信息和一般背景，请参阅https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/。

【讨论】：