深色模式已成为各种设备和平台上广泛采用的显示设置。随着Gmail、Outlook和Apple Mail等电子邮件客户端支持深色模式,了解它如何影响电子邮件设计以及如何相应地优化您的营销活动变得非常重要。

在本文中,您将了解什么是深色模式、如何在深色模式下预览您的电子邮件,以及针对浅色和深色模式优化设计的最佳实践。

深色模式是一种使用深色背景和浅色文字的显示设置,旨在减少低光环境下的眼睛疲劳。自推出以来,深色模式因以下原因在各大平台(iOS、Gmail、Outlook)上广受欢迎:

要在 Omnisend 中访问深色模式预览:

您可以使用两种颜色反转类型预览您的电子邮件:完全和部分。以下部分说明了每种类型的含义以及电子邮件客户端如何处理深色模式。

电子邮件客户端以不同的方式应用深色模式,影响颜色的显示方式。了解这些差异有助于创建在深色和浅色模式下都美观的设计。

反转所有颜色(亮色变暗色,反之亦然)。通常应用于:

仅调整特定元素,例如文本,同时保持图像和某些品牌颜色不变。这种方法常见于:

下表显示了截至 2023 年 10 月不同电子邮件客户端如何处理深色模式。在设计电子邮件时可以将此作为参考。

某些电子邮件客户端(Apple Mail、Gmail 应用、Office 365 Mac)允许您在 HTML 项目中使用自定义 CSS 强制设置背景颜色。但是,这种技术不适用于 Outlook 桌面版、Windows 邮件或 Office 365(Win),这些客户端无论如何都会应用完全反转。即使在支持的情况下,文本颜色仍会自动反转。

在 Omnisend 中添加自定义 CSS:

将文本内容保持为白色背景上的黑色文字,是在浅色和深色模式下保持可读性的简单而有效的方法。这可以最大限度地减少不必要的颜色变化,让您专注于主要文本区域之外的创意设计元素。

通过在模板中包含特定的深色模式样式,您可以确保所有电子邮件都能正确显示——即使您忘记为深色模式调整样式。

以下是 CSS 基础样式的一个简单示例:

使用 Omnisend 中的预览功能(深色模式切换开关)来预览您的电子邮件在热门客户端(如 Gmail、Outlook 和 Apple Mail)以及不同操作系统中的显示效果。检查可读性、品牌颜色以及徽标和图片的正确显示。

简洁的背景(深色模式使用黑色,浅色模式使用白色)可以增强可读性,并降低不同电子邮件客户端之间设计不匹配的风险。可以加入细微的对比或阴影来增加额外的层次感,同时不影响深色模式的功能。

某些电子邮件客户端(如 Gmail iOS 和 Outlook 桌面版)会应用完全的颜色反转,覆盖您的自定义设计,即使您已经为两种模式都进行了设计。这是电子邮件客户端的限制,而不是 Omnisend 的问题。

解决方法: 使用可见性设置为移动端和桌面端创建单独的电子邮件块,并使用较深的色调设计移动端块,以便在深色模式下反转效果不那么强烈。始终在完全和部分深色模式下预览,并在移动端和桌面端向自己发送测试电子邮件以查看最终呈现效果。

同一电子邮件客户端可能会根据设备应用不同的深色模式反转类型。例如,Gmail iOS 使用完全颜色反转(反转所有颜色),而 Gmail Android 使用部分反转(调整文本和某些背景)。这由电子邮件客户端的深色模式逻辑控制,而非由 Omnisend 控制。

解决方案: 在 Omnisend 中以完整和部分深色模式预览您的电子邮件,并在发送给受众之前在移动设备和桌面设备上向自己发送测试电子邮件。

深色模式预览可以让您大致了解电子邮件在完全反转和部分反转模式下的呈现效果,但电子邮件客户端的实际呈现可能会略有不同。

解决方案: 在发送给受众之前,始终先向自己发送测试邮件,并在实际收件箱(Gmail、Outlook、移动端和桌面端的 Apple Mail)中查看,以确认最终显示效果。

我可以阻止我的电子邮件在深色模式下显示吗?

不,您无法阻止电子邮件在深色模式下显示,也无法在所有电子邮件客户端中强制使用白色背景。深色模式由每个订阅者的电子邮件客户端和设备设置(Gmail、Apple Mail、Outlook 等)控制,而非由发件人控制。某些电子邮件客户端会应用完全颜色反转(将白色背景变为黑色),而其他客户端则应用部分反转。与其试图阻止深色模式,不如使用我们的深色模式预览功能来设计在浅色和深色模式下都美观的电子邮件。

如何强制我的背景颜色在深色模式下保持不变?

Omnisend 没有内置功能来强制设置背景颜色。您可以在电子邮件构建器中使用 HTML 项添加自定义 CSS,以便为某些电子邮件客户端(Apple Mail、Gmail 应用)应用强制背景颜色。但是,此技术在 Outlook 桌面版、Windows 邮件或 Office 365(Win)中不起作用,这些客户端无论如何都会应用完全的颜色反转。即使在支持的情况下,文本颜色仍会自动反转。要添加自定义 CSS:转到 添加元素 → 将 HTML 项拖入您的电子邮件 → 在右侧显示的编辑器中粘贴您的 CSS 代码。

为什么我的白色标志在深色模式下消失了?

如果您的徽标是白色或非常浅的颜色,并且放置在白色背景上,那么在深色模式下它会消失,因为背景会反转为黑色,但徽标仍然是白色(或变得更深)。要解决此问题,请在徽标后面添加彩色或透明背景,或应用浅色轮廓以确保它在浅色和深色模式下都保持可见。在发送之前,请务必在深色模式下预览您的电子邮件。

我在哪里添加 Omnisend 的深色模式 CSS 代码?

要在 Omnisend 中添加自定义 CSS:在电子邮件构建器中打开您的电子邮件,转到左侧的 添加元素,将 HTML 项拖入您的电子邮件中,HTML 编辑器将出现在右侧。将您的深色模式 CSS 代码粘贴到那里。请注意,某些电子邮件客户端可能会完全忽略自定义 CSS——请务必在真实收件箱中测试您的电子邮件。

为什么我的电子邮件在深色模式下,移动端和桌面端看起来不一样?

同一电子邮件客户端可能会根据设备应用不同的深色模式反转类型。例如,Gmail iOS 使用完全颜色反转(反转所有颜色),而 Gmail Android 使用部分反转(调整文本和某些背景)。这由电子邮件客户端的深色模式逻辑控制,而非由 Omnisend 控制。为确保您的电子邮件在各种设备上都能良好显示,请在 Omnisend 中以完全和部分深色模式预览,并在发送给受众之前在移动设备和桌面设备上向自己发送测试邮件。

如果按照本指南操作后,我的自定义颜色仍然显示不正确怎么办?

某些电子邮件客户端(如 Gmail iOS 和 Outlook 桌面版)会应用完全的颜色反转,覆盖您的自定义设计,即使您已经为两种模式都进行了设计。这是电子邮件客户端的限制,而不是 Omnisend 的问题。

解决方法: 使用可见性设置为移动端和桌面端创建单独的电子邮件块,并为移动端块设计较深的色调,以便在深色模式下反转效果不那么激进。始终在完全和部分深色模式下预览,并向自己的移动端和桌面端发送测试电子邮件以查看最终渲染效果。

深色模式预览是否能准确显示我的邮件在收件箱中的实际外观?

深色模式预览可以让您大致了解电子邮件在完全反转和部分反转模式下的呈现效果,但电子邮件客户端的渲染可能会略有不同。在发送给受众之前,请务必向自己发送测试邮件,并在实际收件箱(Gmail、Outlook、移动端和桌面端的 Apple Mail)中查看,以确认最终外观。

为什么我的图片背景在深色模式下会改变颜色?

像 Gmail 和 Outlook 等移动端电子邮件客户端会对背景非常明亮(白色、黄色等)的图片应用颜色反转,即使图片不是透明的也会如此。这是由电子邮件客户端控制的,而非 Omnisend。要减少这种情况,可以使用非纯白色背景的图片,或在关键元素周围添加内边距/边框。

我可以在品牌资产中设置深色模式颜色吗?

不可以。品牌资产(强调色、深色、浅色)适用于电子邮件模板,但不控制电子邮件客户端的深色模式渲染。要针对深色模式进行优化,请使用设计最佳实践或添加带有深色模式 CSS 的自定义 HTML。