虽然与 @media (prefers-color-scheme: dark) 或 [data-ogsc] 方法相比,这些定位方法相对有限,但如果您需要修复暗模式破坏文本可读性的问题,它们仍然是方便的工具。
当在不同的电子邮件客户端中定位暗黑模式样式时,请务必遵循以下六个步骤,以改善订阅者的暗黑模式电子邮件体验。
1. 优化您的徽标和其他图像,使其适合所有风格
在带有深色文本的透明 PNG 中添加半透明轮廓,以便在暗模式自定义较为有限的电子邮件客户端(如 Gmail App 和 Outlook 2019(Windows))中提高可读性。
这将有助于防止电子邮件客户端决定使用部分颜色反转或全色反转设置时出现任何问题,并让您的订阅者感觉更舒服。尽可能选择透明背景将有助于解决此问题。
Litmus 暗黑模式电子邮件优化徽标示例
您甚至可以使用针对暗模式优化的徽标来获得乐趣!
下面是我制作的一个假标志的例子,我不仅在文本后面添加了浅色 台湾电话号码格式 阴影以使其在深色背景下脱颖而出,而且还在其后面加入了星空纹理以适应“NebulaCo”星系主题。
暗黑模式电子邮件的徽标示例
暗黑模式电子邮件的徽标示例
您在徽标中构建的任何浅色半透明元素在灯光模式下都是不可见的,作为一种防御性设计策略,并提供了添加只能在黑暗模式下看到的特殊品牌风格的机会。
如果您的图像不透明且包含背景,请确保焦点周围有足够的填充,以避免尴尬的并置。
暗黑模式电子邮件中的图像填充示例
另外,使用本指南下面描述的@media(prefers-color-scheme:dark)和[data-ogsc]方法交换亮模式和暗模式图像。