时间戳

首页 > 解决方案 > 覆盖 Outlook 暗模式按钮背景

html - 覆盖 Outlook 暗模式按钮背景

问题描述

我正在尝试向我的电子邮件模板添加对暗模式的支持，但是在涉及 Outlook 时遇到了问题。出于某种原因，Outlook 部分覆盖了我的按钮的背景，这导致它显示不正确：

在此处输入图像描述

按钮的 HTML 如下：

<td align="center" style="word-break: break-word; font-family: &quot;Nunito Sans&quot;, Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="{{action_url}}" class="f-fallback button" target="_blank" style="color: #fff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 !important; background-image: linear-gradient(#13c2c2, #13c2c2) !important; display: inline-block; text-decoration: none; border-radius: 3px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16); -webkit-text-size-adjust: none; box-sizing: border-box;">Reset your password</a>
</td>

该按钮具有以下内联样式（为方便起见而格式化）：

color: #fff;
border-color: #13c2c2;
border-style: solid;
border-width: 10px 18px;
background-color: #13c2c2 !important;
background-image: linear-gradient(#13c2c2, #13c2c2) !important;
display: inline-block;
text-decoration: none;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
-webkit-text-size-adjust: none;
box-sizing: border-box;

此外，我已经在<head>我的电子邮件部分添加了以下内容。

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

谢谢！

标签： htmlcssemailoutlookhtml-email

解决方案

坏消息是，我们无法通过@media 查询或为 Gmail 或 Outlook 生成的类名在电子邮件中通过 CSS 专门针对暗模式。Gmail 替换工作表中的颜色值，Outlook 将内联深色模式颜色值并为其添加一个 !important 并且无法在工作表中覆盖它。

解决方案

在谷歌和微软提供解决方案之前，最好的方法是接受这是一个现实，并设计无论用户选择何种背景颜色来查看它们的电子邮件。越来越多的用户正在采用暗模式，所以它只会变得越来越流行。

祝你好运。

推荐阅读