覆盖 Outlook 暗模式按钮背景
bea*_*rdo 4 html css email outlook html-email
我正在尝试向我的电子邮件模板添加对暗模式的支持，但是在 Outlook 方面遇到问题。由于某种原因，Outlook 部分覆盖了我的按钮的背景，导致其显示不正确：
该按钮的 HTML 如下：
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", 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>
该按钮具有以下内联样式（为了方便起见，进行了格式化）：
<td align="center" style="word-break: break-word; font-family: "Nunito Sans", 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>
此外，我已将以下内容添加到<head>我的电子邮件部分。
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
谢谢！
坏消息是，我们无法通过 @media 查询或为 Gmail 或 Outlook 生成的类名在电子邮件中通过 CSS 专门针对深色模式。Gmail 会替换工作表中的颜色值，而 Outlook 将内联深色模式颜色值并向其添加 !important，从而无法在工作表中覆盖它。
解决方案
在谷歌和微软提供解决方案之前，最好的方法是接受这是现实，并设计出无论用户选择什么背景颜色查看的电子邮件。越来越多的用户正在采用深色模式，因此它只会变得更加流行。
祝你好运。
- @beardo 有一个元标记可以用于 Apple / IOS： `<meta name="supported-color-schemes" content="light">` 目前，它不适用于 Gmail 或 Outlook。 (2认同)
| 归档时间： |
|
| 查看次数： |
11068 次 |
| 最近记录： |