跳到内容
请注意::本文仅为方便您阅读而提供。本文由翻译软件自动翻译,可能未经校对。本文的英文版应被视为官方版本,您可在此找到最新信息。您可以在此处访问。

针对暗模式优化营销电子邮件

上次更新时间: 2025年11月12日

可与以下任何订阅一起使用,除非另有说明:

在电子邮件编辑器中,您可以在编辑时预览营销电子邮件在暗模式下的显示效果,或为特定的电子邮件客户端生成预览。这有助于确保在暗色模式下查看营销电子邮件的收件人能如愿以偿地看到邮件。

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

要在编辑时切换到暗色模式预览电子邮件,请执行以下操作

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

Screenshot of the email editor. The "Display options" dropdown menu at the top of the page is highlighted, as is the "Dark mode preview" option.

在特定客户端中预览黑暗模式

要查看开启暗色模式后电子邮件在特定浏览器或电子邮件客户端中的显示效果,请执行以下操作

  1. 在您的 HubSpot 账户中,导航至 营销 > 电子邮件
  2. 单击已起草电子邮件的名称
  3. 在电子邮件编辑器中,单击右上角的预览和测试,然后选择在电子邮件客户端中预览
  4. 在预览界面,单击左上角的 "选择预览类型"下拉菜单,然后选择每种预览类型旁边的复选框 。要查看暗色模式的可用预览类型,请在搜索栏中输入 "暗色"。

Screenshot of the screen for previewing emails in email clients. The "Choose preview type" dropdown menu is displayed, with "dark" entered in the search bar.

  1. 在右上角单击 "预览"。

了解为暗色模式设计电子邮件的最佳实践

不同的电子邮件客户端和浏览器可能会以不同的方式呈现暗色模式。在设计以暗色模式浏览的电子邮件时,请牢记以下建议:

  • 使用在浅色和深色背景下都能清晰显示的图像:将任何图像转换为 .png 格式,以确保在背景颜色颠倒时能正确显示。
  • 确保任何文本都有足够的颜色对比度: 遵守网页内容可访问性指南,确保文本和背景颜色之间有足够的对比度。
  • 为暗色模式添加媒体查询:某些电子邮件客户端对使用媒体查询自定义样式的支持有限。您可以使用prefers-color-scheme 媒体功能来设置图像和文本在暗模式下的显示方式。此选项仅适用于在设计管理器中创建的电子邮件模板。
这篇文章有帮助吗?
此表单仅供记载反馈。了解如何获取 HubSpot 帮助