这个问题是关于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属性给我带来了麻烦。
有人经历过吗?任何想法吗?提前感谢您的帮助。
问得好。
我为你收藏了几篇来自电子邮件大师的文章!
这个来自Remi Parmentier的解决方案利用<picture>和<source ... media="(prefers-color-scheme:dark)">-这在Apple Mail上是支持的-来交换<img>。我不确定这是在苹果邮件隐私保护之前还是之后，苹果邮件隐私保护会积极地缓存图像，但无论如何它都应该能工作。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标签图片、源和img在html email上下文中的用法:https://www.goodemailcode.com/email-enhancements/picture
请注意，对<picture>的支持是有限的，但是，对@media preferences -color-scheme的支持也是有限的。详情请访问https://www.caniemail.com/。
你也可以考虑给你的后退/正常的标志一个白色(或你的背景色)描边或柔和的"外发光"(透明)，这样它可以在那些电子邮件客户端自动看到-但不让你控制-暗模式的颜色变化。查看https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers/了解更多细节和黑暗模式的一般背景。