黑暗模式是在几年前推出的，并且采用率还在不断增长。 黑暗模式 现在可在macOS，iOS和Android以及包括Microsoft Outlook，Safari，Reddit，Twitter，Youtube，Gmail和Reddit在内的许多应用程序中使用。 但是，并非总是每个人都提供全面的支持。
暗模式可减少屏幕能耗并增加焦点。 一些用户还说他们感到眼疲劳减轻了，但这就是 被质疑.
最近，我们开发了一个Marketing Cloud模板，该模板将Dark Mode集成到了其代码中，从而使在电子邮件客户端中查看时的电子邮件部分形成了鲜明的对比。 这样做可能会为订户带来更多的参与度和点击率。
电子邮件技术的进步并不经常出现，因此很高兴看到这种经验在整个行业中得到采用。 了解最佳实践，要实施的代码以及客户支持对于暗模式的成功实施至关重要。 因此，Uplers小组发布了该指南， 暗模式电子邮件支持.
暗模式电子邮件代码
步骤1：包括元数据以在电子邮件客户端中启用暗模式 –第一步是为启用了暗模式设置的订户启用电子邮件中的暗模式。 您可以通过将此元数据包含在标签。
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">步骤2：为@media包括深色模式样式（prefers-color-scheme：深色） –在您的嵌入式设备中编写此媒体查询 tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com，Outlook 2019（macOS）和Outlook App（iOS）。 如果您不想在电子邮件中使用概述的徽标，则可以使用.dark-img和.light-img类，如下所示。
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}步骤3：使用[data-ogsc]前缀复制深色模式样式 –将这些代码包括在电子邮件中，以便与Android的Outlook应用程序中的暗模式兼容。
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }步骤3：在主体HTML中包括仅深色模式的样式 –您的HTML标记必须具有正确的暗模式类。
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->电子邮件暗模式提示和其他资源
我一直在努力 Martech Zone 每日和每周新闻通讯以支持暗模式，请确保 这里订阅。 与大多数电子邮件编码一样，由于电子邮件客户端及其专有的编码方法不同，这并不是一个简单的过程。 我遇到的一个问题是例外情况，例如，无论黑暗模式如何，您都希望按钮上的白色文本。 大量的代码有点荒谬……我必须有以下例外：
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 一些其他资源：
- 石蕊 –电子邮件营销人员的黑暗模式的终极指南。
- CampaignMonitor –开发人员指南为电子邮件使用暗模式。
