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

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

深色模式是一种显示设置，它采用深色背景和浅色文本，旨在减轻在弱光环境下的眼部疲劳。自推出以来，深色模式因以下等原因，在各大主流平台（iOS、Gmail、Outlook）上广受欢迎：

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

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

电子邮件（Email）客户端以不同的方式应用 Dark Mode，这会影响颜色的显示效果。了解这些差异有助于创建在深色和浅色两种模式下效果都良好的设计。

反转所有颜色（浅色变为深色，反之亦然）。通常应用自：

仅调整文本等特定元素，而图片和一些品牌颜色则不受影响。这种做法常见于：

下表显示了截至 2023 年 10 月，不同的电子邮件（Email）客户端如何处理深色模式。在设计您的电子邮件（Email）时，请以此为参考。

一些电子邮件（Email）客户端（Apple Mail、Gmail 应用程序、Office 365 Mac）允许您在 HTML 项目中使用自定义 CSS 来强制显示背景颜色。然而，这种技术在 Outlook Desktop、Windows Mail 或 Office 365 (Win) 中不起作用，它们无论如何都会应用完全反转。即使在支持的情况下，文本颜色仍会自动反转。

在 Omnisend 中添加自定义 CSS：

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

通过在您的模板中包含特定的 Dark Mode 样式，您可以确保您所有的电子邮件（Email）都正确显示—即使您忘记为 Dark Mode 调整样式。

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

您可以在 Omnisend 中使用 Preview 功能（切换深色模式开关），预览您的电子邮件（Email）在 Gmail、Outlook 和 Apple Mail 等热门客户端以及不同操作系统上的显示效果。检查可读性、品牌颜色，以及 logo 和图片是否正确显示。

简洁的背景（深色模式为黑色，浅色模式为白色）可提高可读性，并降低不同电子邮件（Email）客户端之间出现设计不匹配的风险。融入细微的对比或阴影以增加深度感，同时不影响深色模式的功能。

某些电子邮件（Email）客户端（例如 Gmail iOS 和 Outlook Desktop）会应用完全反色，这会覆盖您的自定义设计，即使您已经为两种模式都进行了设计。这是一个电子邮件（Email）客户端的限制，而不是 Omnisend 的问题。

解决方法：使用可见性设置，为移动设备和桌面设备创建单独的电子邮件（Email）区块，并为移动设备区块设计较深的色调，这样在深色模式下反色效果就不会那么强烈。请务必在完全和部分深色模式下预览，并在移动设备和桌面设备上向自己发送测试电子邮件（Email），以查看最终的渲染效果。

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

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

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

解决方案：在发送给您的受众之前，务必向您自己发送一封测试电子邮件（Email），并在实际的收件箱（Gmail、Outlook、Apple Mail 移动端和桌面端）中查看，以确认最终的显示效果。

我可以防止我的电子邮件（Email）在深色模式下显示吗？

不可以，您无法阻止电子邮件（Email）在深色模式下显示，也无法在所有电子邮件（Email）客户端中强制使用白色背景。深色模式由每位订阅者的电子邮件（Email）客户端和设备设置（Gmail、Apple Mail、Outlook 等）控制，而非由发件人控制。一些电子邮件（Email）客户端会应用完全反色（将白色背景变为黑色），而另一些则会应用部分反色。与其试图阻止深色模式，不如使用 Omnisend 的深色模式预览功能，确保您的电子邮件（Email）在浅色和深色模式下都呈现绝佳效果。

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

Omnisend 没有强制设置背景颜色的内置功能。您可以在Omnisend邮件构建器（Email Builder）中使用HTML项添加自定义CSS，为某些电子邮件（Email）客户端（Apple Mail、Gmail应用）强制应用背景颜色。然而，此技术在 Outlook Desktop、Windows Mail 或 Office 365 (Win) 中不起作用，因为它们无论如何都会应用完全的颜色反转。即使在受支持的情况下，文本颜色仍会自动反转。要添加自定义 CSS：前往 Add Elements → 将 HTML 项目拖入您的电子邮件（Email）中 → 将您的 CSS 代码粘贴到右侧出现的编辑器中。

为什么我的白色 Logo 在深色模式下会消失？

如果您的徽标是白色或浅色，并放置在白色背景上，那么在深色模式下它就会消失，因为背景会反转为黑色，但徽标仍为白色（或颜色变深）。要解决此问题，您可以在您的徽标后添加彩色或透明背景，或应用浅色轮廓，以确保它在浅色和深色模式下都清晰可见。发送前，请务必在深色模式下预览您的电子邮件（Email）。

我应该在 Omnisend 的哪里添加深色模式 CSS 代码？

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

为什么我的电子邮件（Email）在深色模式下，移动设备和桌面设备上的显示效果不同？

同一个电子邮件（Email）客户端会根据设备的不同，应用不同的深色模式反转类型。例如，Gmail iOS 使用完全色彩反转（反转所有颜色），而 Gmail Android 则使用部分反转（调整文本和部分背景）。此项由电子邮件（Email）客户端的深色模式逻辑控制，而非 Omnisend。为确保您的电子邮件（Email）在不同设备上都能呈现良好效果，请在 Omnisend 中以 Full 和 Partial 深色模式进行预览，并在发送给您的受众之前，向您自己的移动设备和桌面设备发送测试电子邮件（Email）。

如果遵循本指南后，我的自定义颜色仍然显示错误，该怎么办？

某些电子邮件（Email）客户端（例如 Gmail iOS 和 Outlook Desktop）会应用完全反色，这会覆盖您的自定义设计，即使您已经为两种模式都进行了设计。这是一个电子邮件客户端的限制，而不是 Omnisend 的问题。

解决方法：使用可见性设置，为移动设备和桌面设备创建单独的电子邮件（Email）区块，并为移动设备区块设计较深的色调，以便在深色模式下，颜色反转不会过于突兀。请务必在完全和部分深色模式下预览效果，并向您自己发送测试电子邮件（Email），在移动设备和桌面设备上查看最终的渲染效果。

深色模式预览是否能精确显示我的电子邮件（Email）在收件箱中的样子？

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

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

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

我可以在 Brand Assets 中设置深色模式的颜色吗？

编号Brand Assets（强调色、深色、浅色）适用于电子邮件（Email）模板，但无法控制在各个电子邮件（Email）客户端中的深色模式呈现效果。要针对深色模式进行优化，请使用设计最佳实践或添加带有深色模式 CSS 的自定义 HTML。