覆盖 Outlook 暗模式按钮背景答案

【问题标题】：Override Outlook dark mode button background覆盖 Outlook 暗模式按钮背景
【发布时间】：2020-08-22 18:07:01
【问题描述】：

我正在尝试向我的电子邮件模板添加对暗模式的支持，但是在涉及 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" />

谢谢！

【问题讨论】：

看起来按钮没问题，但按钮内的文本可能是问题所在。文本是否包含在 <button></button> 以外的其他内容中？
@tamarin 确实如此。它包含在元素中。
那么你能看到这个元素的样式并覆盖它吗？
@tamarin 看起来无论我添加什么样式，Outlook 仍然会覆盖它。即使!important 似乎也无济于事。
!important hack 已弃用 Outlook.com 2019 年 10 月 15 日编辑：微软在今年早些时候和现在更改了暗模式的实现将 inline !important 添加到他们编辑的所有样式中。无法再覆盖 Outlook.com 的深色模式样式。

标签： html css email outlook html-email

【解决方案1】：

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

解决方案

在 Google 和 Microsoft 提供解决方案之前，最好的方法是接受这是一个现实，并设计无论用户选择何种背景颜色来查看邮件都可以正常工作的电子邮件。越来越多的用户正在采用深色模式，因此它只会在未来变得更加流行。

祝你好运。

【讨论】：

您好，谢谢您的回复！很遗憾听到。我已经阅读了一些似乎建议您可以使用一些@media 查询选择器来设置暗模式样式的来源，但正如您所说，它似乎并没有得到广泛的支持。如果我有任何进展，我会告诉你的。干杯！
@beardo 有一个可以用于 Apple / IOS 的元标记：<meta name="supported-color-schemes" content="light"> 目前，它不适用于 Gmail 或 Outlook。
呃……谢谢你，微软，你改变了公司的颜色，却没有办法阻止它伤害到它。

【解决方案2】：

哪个展望？（适用于 Windows 的 Outlook 桌面，2007-19？适用于 Mac 的 Outlook 桌面？Android 上的 Outlook？iOS？Outlook.com/365 网络邮件？）

您也许可以尝试这个技巧，由 Rémi Parmentier 提供（我说“可以”是因为我没有您的按钮的代码）：

<a style="color:blue;">
  <span class="dark-mode-red">…</span>
</a>

这在你的<head> 部分：

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="text/css">
@media (prefers-color-scheme: dark) {
  .dark-mode-red {color:red !important}
}
</style>

因此，从您的内联部分中删除 background-image: linear-gradient(#13c2c2, #13c2c2) !important;（内联的任何内容都会被翻译），并将其附加到 @media 暗模式样式。

这是一个完整的工作示例（尽管 Outlook Office 365 Windows 显示黑色文本）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
    <meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark"> 
<style type="text/css">

@media (prefers-color-scheme: dark) {
  .darkbutton {
    color:#ffffff !important;
      background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}

</style>


</head>
<body>
    <td align="center" style="word-break: break-word; font-family:  Helvetica, Arial, sans-serif; font-size: 16px;">
  <a href="https://www.google.com" class="darkbutton" target="_blank" style="color: #ffffff; border-color: #13c2c2; border-style: solid; border-width: 10px 18px; background-color: #13c2c2 ; 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>
</body>
</html>

【讨论】：

内森，感谢您的意见！我更新了我的问题以包含我用于按钮的 HTML 和 CSS。我还在<head> 标签中包含了我正在使用的标签。如果我正确理解您的建议，设置 color 属性不会更改文本颜色吗？此外，为我的按钮添加带有特定样式的@media (prefers-color-scheme: dark) 似乎没有帮助（包括data-ogsb 特定标签）。
@beardo 抱歉，代码没有经过测试——它运行良好，并且还支持 Apple 的暗模式。
@Nathan 于 2019 年 10 月 15 日 Remi 表示，微软今年早些时候改变了他们对暗模式的实现，现在在他们编辑的所有样式中添加了 inline !important。这是新事物吗？
@gwally 是的，这是真的。但是，如果您不提及颜色内联，它不会改变它。所以这是一个解决这个问题的技巧（在<a> 中注意我没有放置线性梯度，这样它就不会被覆盖）。通过将其抽象到类中，系统不会内联 !important 它，因此我们可以在 <style> 中覆盖它

【解决方案3】：

好吧，您不能将背景颜色更改为为边框设置的颜色，这并不完全正确。实际上，您可以更改它以解决 Outlook 中的这个地狱般的问题。但有时，这种情况就是“有时”之一。

您已经使用background-image，这确实是要走的路。将 linear-gradient 替换为 1x1 像素的 .png 文件，该文件恰好包含该边框颜色并重复此操作。这种颜色不会被反转——毕竟它是一个图像。为了兼容性，您可以尝试将background="file here" 作为属性应用。它会无限重复，但这正是我们想要的。但是，除非您将整个按钮设为单独的图像，否则颜色将保持白色。

【讨论】：

【解决方案4】：

去掉 a 标签上的 background-color 元素。你已经拥有了

background-image:linear-gradient(#13c2c2, #13c2c2)

这就是你所需要的。

【讨论】：

【解决方案5】：

Outlook.com 和 Outlook (Windows/Mac/Android/iOS) 会反转/调整大多数颜色，但由于某种原因，它们不会调整边框颜色，这就是为什么您的 <a> 标记的边框是原始颜色的原因，但<a> 的background-color 已针对暗模式进行了调整。尝试使用border-color: transparent;。

【讨论】：

【解决方案6】：

图片 1x1px 背景 + 颜色 = 防弹按钮颜色： <a href="https://ilovecode.com" width:auto;font-family:Roboto, arial, sans-serif;font-size:16px;color:#ffffff;border-style:solid;border-color:#59BC2B;border-width:10px 20px;display:inline-block;background-color:#59BC2B;background-image:url(@987654321@);text-align:center;text-decoration:none;">GO!

【讨论】：