什么是深色模式？

深色模式是一种使用深色背景和浅色文字的显示设置，旨在降低在低光环境下的眼睛疲劳。自从推出以来，深色模式因以下原因在主要平台（iOS、Gmail、Outlook）上获得了广泛的欢迎：

访问深色模式预览

要在 Omnisend 中访问深色模式预览，打开您的电子邮件并点击右上角的预览。进入预览模式后，切换开关以在深色模式下预览。

您可以使用两种类型的颜色反转来预览您的电子邮件：全反转和部分反转。本指南将进一步解释每种类型的含义。

电子邮件客户端以不同方式应用深色模式，影响颜色显示方式。了解这些变化可以帮助创建在深色和浅色模式下都能很好看的设计：

1。全反转：反转所有颜色（浅色到深色，反之亦然）。通常适用于：

2。部分反转：仅调整特定元素，如文字，同时保留图像和某些品牌颜色不变。这种方法通常用于：

在深色模式下的颜色反转示例。图片来源：https://www.listrak.com/

为了最大化可读性和品牌一致性，请考虑使用部分和全反转模式设计电子邮件。

电子邮件客户端	深色模式下的HTML处理	支持 `@media`	[data‐ogsc] 支持	强制背景颜色支持	值得注意的地方
Apple Mail (MacOS)	没有变化*	✓ 是	✘ 否	✓ 是	如果存在 <meta> 标签，纯白色（#ffffff）背景将被反转
iPhone / iPad (iOS 16)	没有变化*	✓ 是	✘ 否	✓ 是	如果存在 <meta> 标签，纯白色（#ffffff）背景将被反转
Outlook.com	部分反转	✘ 否	部分*	✘ 否	较浅的背景颜色将被加深。如果图像被链接，图像交换有效
Outlook 2021 (WinOS)	全反转*	✘ 否	✘ 否	✘ 否	可针对VML部分进行特殊定位。
Outlook app (iOS)	部分反转	✘ 否	部分*	✘ 否	较浅的背景颜色将被加深，深色背景上的浅字体可能会变暗。如果图像被链接，图像交换有效
Outlook app (Android)	部分反转	✘ 否	部分*	✘ 否	较浅的背景颜色将被加深，深色背景上的浅字体可能会变暗。如果图像被链接，图像交换有效
Gmail app (iOS)	全反转*	✘ 否	✘ 否	✓ 是	特殊定位对某些颜色和字体颜色有效
Gmail app (Android)	部分反转	✘ 否	✘ 否	✓ 是
Office 365 (Win)	全反转	✘ 否	✘ 否	✘ 否
Office 365 (Mac)	部分反转	部分*	✘ 否	✓ 是	较浅的背景颜色将被加深
Windows Mail	全反转	✘ 否	✘ 否	✘ 否

强制背景颜色保持一致不会影响字体颜色，字体颜色仍将反转。唯一的例外是完全支持 @media 或 [data-ogsc] 的客户端以及Gmail 应用程序，在这种情况下，颜色混合修正是有效的。

这里是一些提升订阅者深色模式体验的设计和编码技巧：

透明图像：对于透明背景上带有深色文本的图像，添加浅的、半透明的轮廓以确保颜色反转时文字仍然清晰可读。这对于经常在深色模式下应用部分或全反转颜色的 Gmail 和 Outlook 特别有用。
深色模式中的徽标示例。图片来源： https://www.litmus.com/
深色模式中的品牌<模式：使用在浅色模式下看不见但在深色模式下增加独特品牌触感的细微浅色元素。
非透明图像：在非透明图像中的关键元素周围添加填充以避免颜色变化时的对齐问题。

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

通过在模板中包含特定的深色模式样式，您可以确保所有电子邮件都显示正确——即使您忘记对深色模式进行样式调整。下面是一个快速的CSS基础样式示例：
```
.darkbg { background-color: black !important; } .h1, .h2 { color: white !important; } .button { background-color: white !important; color: black !important; }
```

快速提示：使用像.darkbg这样的类用于背景以及.button用于CTA按钮可以快速更新多个电子邮件，确保在深色模式下的一致性。

在 Omnisend 中使用预览功能（切换深色模式开关）预览您的电子邮件以适用于主流客户，例如 Gmail、Outlook 和 Apple Mail，以及不同操作系统。检查可读性、品牌颜色、徽标和图像的正确显示。

按照这些步骤，您将能够创建在 Omnisend 中视觉吸引力的电子邮件，优化为浅色与深色模式，以提供一致且令人愉悦的订阅者体验。