哪些电子邮件客户端支持暗黑模式？
Posted: Mon Mar 24, 2025 4:30 am
不同的暗黑模式定位方法
如上所述，暗黑模式下的电子邮件客户端处理常规 HTML 电子邮件的方式会有所不同。但是，如果您想应用自己的暗黑模式样式，而这些样式可能与电子邮件客户端的默认配色方案有很大不同，该怎么办？您可以使用两种方法。
@media（首选配色方案：深色）
此方法的工作方式与在 @media 查询中为您的移动响应式视图应用样式块的方式非常相似，只是此 CSS 块针对设置为暗模式的任何用户界面。@media（prefers-color-scheme：dark）允许您创建最强大的自定义暗模式主题，您可以在其中实现任何内容，从暗模式特定的图像交换、悬停效果、背景图像……基本上您可以用传统 CSS 做的任何事情！此方法要求您将暗模式元标记和样式添加到电子邮件的 <head> 中，以便在 Apple Mail 中使用。
[数据-ogsc]/[数据-ogsb]
这种方法是Mark Robbins 首次引起我们注意的，用于 Outlook 应用。并非所有样式 奥地利赌博数据 都适用于该方法，但它确实适用于 Outlook.com 上的图片交换。虽然它的市场份额似乎很窄，但只需复制您已经应用的 @media (prefers-color-scheme: dark) 样式，并在每个 CSS 规则中添加适当的 [data-ogsc] 前缀，就相对容易了。
这些客户端和应用程序当前提供暗模式 - 用户可以手动设置，也可以通过自动检测用户喜欢的配色方案来设置：
但是，尽管所有这些电子邮件客户端都提供了将其 UI 设置为深色配色方案的方法，但这并不意味着它们会以相同的方式处理您的电子邮件。电子邮件渲染很复杂。在一个客户端中看起来很棒的电子邮件在另一个客户端中可能看起来很糟糕。现在，暗黑模式又增加了一层复杂性。正如我们已经展示的那样，暗黑模式电子邮件客户端可能会以各种方式处理您的代码。
如上所述，暗黑模式下的电子邮件客户端处理常规 HTML 电子邮件的方式会有所不同。但是，如果您想应用自己的暗黑模式样式，而这些样式可能与电子邮件客户端的默认配色方案有很大不同，该怎么办？您可以使用两种方法。
@media（首选配色方案：深色）
此方法的工作方式与在 @media 查询中为您的移动响应式视图应用样式块的方式非常相似，只是此 CSS 块针对设置为暗模式的任何用户界面。@media（prefers-color-scheme：dark）允许您创建最强大的自定义暗模式主题，您可以在其中实现任何内容，从暗模式特定的图像交换、悬停效果、背景图像……基本上您可以用传统 CSS 做的任何事情！此方法要求您将暗模式元标记和样式添加到电子邮件的 <head> 中，以便在 Apple Mail 中使用。
[数据-ogsc]/[数据-ogsb]
这种方法是Mark Robbins 首次引起我们注意的，用于 Outlook 应用。并非所有样式 奥地利赌博数据 都适用于该方法，但它确实适用于 Outlook.com 上的图片交换。虽然它的市场份额似乎很窄，但只需复制您已经应用的 @media (prefers-color-scheme: dark) 样式，并在每个 CSS 规则中添加适当的 [data-ogsc] 前缀，就相对容易了。
这些客户端和应用程序当前提供暗模式 - 用户可以手动设置，也可以通过自动检测用户喜欢的配色方案来设置：
但是，尽管所有这些电子邮件客户端都提供了将其 UI 设置为深色配色方案的方法，但这并不意味着它们会以相同的方式处理您的电子邮件。电子邮件渲染很复杂。在一个客户端中看起来很棒的电子邮件在另一个客户端中可能看起来很糟糕。现在，暗黑模式又增加了一层复杂性。正如我们已经展示的那样，暗黑模式电子邮件客户端可能会以各种方式处理您的代码。