如何通过电子邮件模板禁用暗模式答案

【问题标题】：How to disable the dark mode via email template如何通过电子邮件模板禁用暗模式
【发布时间】：2020-08-18 10:56:59
【问题描述】：

有没有办法在 outlook.com 中禁用暗模式并强制我的电子邮件模板的原始样式呈现为在亮/正常模式下显示？

【问题讨论】：

如果用户喜欢深色模式，您不应该对他们强制使用浅色模式。

【解决方案1】：

首先，您不能通过 css 禁用样式（深色或浅色）。

理论上你可以做的是使用媒体查询 (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 来检测是使用亮模式还是暗模式，并分别应用 css 规则。

但是，据我所知，由于您指的是电子邮件模板，因此不支持媒体查询，因此简短的回答是否 :(

【讨论】：

【解决方案2】：

Outlook 对电子邮件的暗模式支持具有独特的行为。如果需要，您可以learn more here。无论如何，它使用[data-ogsc] 来控制要显示的主题：您也可以use the media queries 强制您的模板同时显示在浅色/深色主题首选项中。只需将您的规则复制并粘贴到@media screen and (prefers-color-scheme: dark)；正如我所说，Outlook 要求 [data-ogsc] .darkmode 选择器来做同样的事情。因此，一旦您创建了轻量级默认模板，将其粘贴到这些括号中，它应该适用于大多数网络邮件，包括 Outlook。

【讨论】：

【解决方案3】：

有一种方法可以在您的电子邮件模板中禁用暗模式。您需要将这两个元标记添加到您的 HTML：

<meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light">

识别暗模式的新浏览器将能够使用此功能，因此电子邮件将像以前一样显示。这种方式不应该有任何自动样式覆盖。

如果你想添加暗模式，以覆盖你的亮模式样式，你可以像这样添加它们，我建议这样做：

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<style>
@media (prefers-color-scheme: dark) {
  /* Dark mode styles */
}
</style>

您的内联标签将保留，但同样，较新的电子邮件客户端将能够识别 style 和 media 部分。老电子邮件客户端会忽略它。

【讨论】：

【解决方案4】：

您可以通过在电子邮件的任意位置添加图像来简单地忽略电子邮件中的暗模式。这帮助我解决了这个问题。希望您的问题也能由此得到解决。

【讨论】：