覆盖 Outlook 深色模式按钮背景

Question

我正在尝试为我的电子邮件模板添加对深色模式的支持，但在 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" />

谢谢！

Answer 1

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

解决方案

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

祝你好运。

Answer 2

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

你可以试试这个技巧，由 Rémi Parmentier 提供（我说 'may' 因为我没有你按钮的代码）：

<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>

Answer 3

嗯，您不能将背景颜色更改为为边框设置的颜色，这并不完全正确。实际上，您可以更改它以解决 Outlook 中的这个可怕问题。不过有时候，这个案例就是其中之一 'sometimes'。

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

Answer 4

删除 a 标签上的 background-color 元素。您已经拥有

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

这就是你所需要的。

Answer 5

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

Answer 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(<a href="https://path-to-the-1px-image.png" rel="nofollow noreferrer">https://path-to-the-1px-image.png</a>);text-align:center; text-decoration:none;">开始吧！

覆盖 Outlook 深色模式按钮背景

Override Outlook dark mode button background

html

css

email

outlook

html-email