这种全彩色反转方案不仅从根本上改变了您的电子邮件,而且使用此逻辑的电子邮件客户端目前也不允许暗模式定位。
电子邮件客户端仍在研究如何最好地实现暗模式,并且可能会接受用户的反馈——特别是因为不允许电子邮件开发人员以自己的风格定位暗模式可能会对可读性和可访问性产生负面影响。
为了倡导更好的暗黑模式定位支持和侵入性更小的暗黑模式主题逻辑,您可以直接向 Gmail 的无障碍团队传达您的想法,也可以贡献 Gmail 暗黑模式破坏您电子邮件的截图。
如上所述,暗黑模式下的电子邮件客户端处理常规 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] 前缀,就相对容易了。
哪些电子邮件客户端支持暗黑模式?
这些客户端和应用程序当前提供暗模式 - 用户可以手动设置,也可以通过自动检测用户喜欢的配色方案来设置:
移动应用程序
iPhone 邮件
iPad 邮件
Gmail 应用程序(Android 版)
Gmail 应用程序 (iOS)
Outlook 应用程序 (Android)
桌面客户端
苹果邮件
Outlook 2021(Mac OS)
Outlook 2021 (Windows)
Office365(MacOS)
Office365(Windows)
Windows 邮件
Web 客户端
Outlook.com
但是,尽管所有这些电子邮件客户端都提供了将其 UI 设置为深色配色方案的方法,但这并不意味着它们会以相同的方式处理您的电子邮件。电子邮件渲染很复杂。在一个客户端中看起来很棒的电子邮件在另一个客户端中可能看起来很糟糕。现在,暗黑模式又增加了一层复杂性。正如我们已经展示的那样,暗黑模式电子邮件客户端可能会以各种方式处理您的代码。