替代Outlook黑暗模式按钮背景

时间：2020-05-07 12:29:16

标签： html css email outlook html-email

我试图在我的电子邮件模板中添加对暗模式的支持，但是在Outlook方面遇到问题。由于某种原因，Outlook部分覆盖了我按钮的背景，这导致它无法正确显示：

enter image description here

该按钮的HTML如下：

val = 1
fmt = '%Y-%m-%d  %H:%M:%S'
now = datetime.datetime.now().strftime("%Y-%m-%d  %H:%M:%S")
d2 = datetime.datetime.strptime(now, fmt)

registers = env['product.supplierinfo'].search([('product_tmpl_id','=',record.product_tmpl_id.id),('id','!=', record.id)], order = "sequence asc")
maxi = max(reg.write_date for reg in registers)

d1 = datetime.datetime.strptime(maxi, fmt) 
diff = (d2-d1).seconds

if diff > 1:
  for reg in registers:
    val = val + 1
    reg['sequence'] = val
  record.write({'sequence': 1})

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

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

谢谢！

6 个答案:

答案 0 :(得分：4)

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

解决方案

在Google和Microsoft提供解决方案之前，最好的方法是接受这一现实，并设计出无论用户选择查看背景颜色如何都有效的电子邮件。越来越多的用户采用黑暗模式，因此它只会越来越流行。

祝你好运。

答案 1 :(得分：0)

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

RémiParmentier可能会尝试这种技巧（我说“可能”是因为我没有按钮的代码）：

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

答案 2 :(得分：0)

嗯，不能完全将背景颜色更改为边框设置的颜色。您实际上可以可以进行更改，以解决Outlook中的这一令人毛骨悚然的问题。但是有时候，这种情况是“有时”之一。

您已经使用了background-image，这确实是可行的方法。将linear-gradient替换为完全包含该边框颜色的1x1像素.png文件，然后重复该操作。该颜色不会反转-毕竟是图像。为了兼容起见，您可以尝试将background="file here"用作属性。它会无限重复，但这正是我们想要的。但是，除非您将整个按钮变成单独的图像，否则颜色将保持白色。

答案 3 :(得分：0)

Outlook.com和Outlook（Windows / Mac / Android / iOS）将反转/调整大多数颜色，但是由于某些原因，它们不调整边框颜色，这就是<a>标签的边框是原始边框的原因颜色，但background-color中的<a>已调整为深色模式。这只是一个答案，而不是解决方案，只是为了解释这里发生的事情。

答案 4 :(得分：0)

图像 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(https://path-to-the-1px-image.png);text-align:center;text-decoration:none;">GO!

答案 5 :(得分：-1)

取出标签上的background-color元素。您已经有

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

这就是您所需要的。

相关问题
最新问题