覆盖Outlook黑暗模式按钮背景

问题描述 投票：0回答：1

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

enter image description here

按钮的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" />

谢谢！我正在尝试在我的电子邮件模板中添加对黑暗模式的支持，但是在使用Outlook时出现了问题。

html css email outlook html-email
1个回答
1
投票

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

解决方法

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

祝您好运。

0
投票

哪款Outlook？(Windows的Outlook桌面，2007-19? Mac上的Outlook桌面？Android上的Outlook？iOS上的Outlook？Outlook.com365 webmail？)

你也许可以试试这个技巧，由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>
0
投票

好吧，这不是完全正确的，你不能改变背景颜色到什么是设置的边界。实际上，您可以 可以 改变，以解决Outlook中的这个地狱般的问题。但有时，这种情况就是其中的一个 "有时"。

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.