预览和优化电子邮件设计在暗色模式下的显示效果

许多电子邮件客户端都有暗色模式设置，这可能会导致您的营销电子邮件在打开亮色模式的客户端中显示不一致。

在电子邮件编辑器中切换暗色模式预览

在设计电子邮件时，切换到暗色模式预览：

1. 在您的 HubSpot 账户中，导航至 营销 > 电子邮件。
2. 单击草稿邮件的名称 。
3. 在邮件编辑器顶部，单击显示选项，然后打开暗色模式预览 开关。

预览电子邮件在特定客户端暗色模式下的外观

要查看联系人在启用了暗色模式的浏览器或客户端中打开邮件时的外观，请执行以下操作

1. 在您的 HubSpot 账户中，导航至 营销 > 电子邮件。
2. 单击现有已起草电子邮件的名称。
3. 在电子邮件编辑器右上方，单击预览和测试，然后选择收件箱预览。
4. 在预览界面顶部，单击客户端。
5. 在黑暗模式下，选择要预览的任何客户端旁边的复选框。

6. 在右上角，单击立即测试我的电子邮件。

为暗色模式设计电子邮件时的最佳做法

在使用不同的黑暗模式客户端预览电子邮件时，请注意每个客户端可能会以不同的方式呈现您的电子邮件。例如，如果您的联系人使用 Apple Mail 打开您的电子邮件，那么无论他们是否启用了暗色模式，电子邮件的显示效果都是完全一样的。而如果联系人在 Windows 上的 Gmail 或 Outlook 等应用中启用了暗色模式，你可能会发现电子邮件的样式会有更大的不同，例如背景颜色会倒置。

要确认不同客户端的电子邮件样式保持一致，请查看以下提示。

使用在明暗背景上都能清晰显示的图片

在上传图片并将其添加到电子邮件之前，先将图片转换为 PNG 文件，这有助于确保图片能在电子邮件客户端中呈现，这些客户端会在暗色模式下自动反转电子邮件的背景颜色。如果图片中有文字（如徽标），还可以在文字周围添加半透明轮廓，使其更加突出。

选择无障碍网页的颜色

无论收件人使用哪种电子邮件客户端，设计电子邮件内容使其易于访问都非常重要。遵守无障碍标准（如检查文本的颜色对比度）也有助于您的电子邮件在暗模式下正确显示。在 HubSpot 博客上了解更多有关网络无障碍色彩的信息。

为 iOS 中的暗模式样式指定媒体查询

包括 Apple Mail 和 Outlook.com 在内的一些电子邮件客户端对通过媒体查询检测和添加自定义样式提供了有限的支持。如果你正在使用更新后的经典电子邮件编辑器，而且你有开发人员资源对电子邮件的 CSS 进行修改，你可以使用prefers-color-scheme 媒体功能添加媒体查询，以配置图像和文本在暗模式和亮模式下的外观。