制作完设计组件后，您需要为支持图像交换的客户创建图像的替代版本。为什么不从此开始呢？
有些电子邮件客户端支持暗黑模式，而有些则不支持，因此我们不能假设我们能够切换每封电子邮件中的图片。但是，如果可以，我们应该这样做！
以下是实际操作的示例。首先，让我们看一下图像的光照模式版本。这是我们在指定光照模式的每个实例中都会使用的原始图像。
浅色模式版本：
接下来是不支持图像交换的暗黑模式版本的图像。当我们无法控制暗黑模式下发生的事情时，我们将使用它。（注意：我们采用了在图标后面添加圆圈的方法！）
不支持图片交换的暗黑模式：
最后，这是支持图像交换的暗黑模式版本的图像。当我们能够控制暗 台湾电话 黑模式下发生的事情时，我们将使用它。请注意深色背景上的较浅图标！
支持图片交换的暗黑模式：
这种迭代式图像优化方法可确保考虑到所有可能性，同时不会尝试在无法实现的电子邮件客户端和操作系统中实现目标。一切都在于灵活性！
有没有办法根据用户是否启用了暗模式来提供不同的图像？
是的！您可以根据用户是否启用了暗黑模式来提供不同的图像，方法是使用 CSS 媒体查询或CSS，具体取决于您尝试在哪个客户端中交换图像。这允许您为暗黑模式指定不同的图像源。为确保此方法在 Apple Mail（包含在 macOS 中）中正常运行，请记住在电子邮件中添加必要的暗黑模式元标记和样式。@media (prefers-color-scheme: dark) [data-ogsc] <head>
您还可以显示或隐藏图像。
此代码片段用于暗黑模式图像交换，适用于 Apple/iOS，并设置了要在 Outlook.com 中交换的图像。为了确保在 Outlook.com 上进行交换，需要链接图像。
在 Litmus 社区获取代码 →
如何使用过滤器和反转属性来动态调整图像以适应暗模式？
CSS 过滤器属性在电子邮件中的支持有限，因此其有效性实际上取决于您的受众在哪里打开他们的电子邮件。（专业提示：您可以使用 Litmus 的电子邮件分析跟踪像素找出您的订阅者在哪里打开电子邮件。）
例如，在 Litmus 这里，我们最常见的打开方式是在 Gmail 中，但我们发现只有大约 15% 的用户支持过滤属性，这意味着我们通常会避免使用它。