替代Outlook黑暗模式按钮背景 [英] Override Outlook dark mode button background
问题描述
我试图在我的电子邮件模板中添加对暗模式的支持，但是在Outlook方面遇到问题。出于某种原因，Outlook会部分覆盖我的按钮的背景，导致其无法正确显示：
I am trying to add support for dark mode to my email templates, however am having an issue when it comes to Outlook. For some reason Outlook is partially overriding the background of my button which is causing it to display incorrectly:
按钮的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>
按钮具有以下内联样式（为方便起见而设置）：
The button has the following inline style (formatted for your convenince):
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> 部分。
Additionally, I've already added the following to the <head> section of my email.
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
谢谢！
推荐答案
坏消息是，我们无法通过@media查询或Gmail或Outlook生成的类名通过电子邮件中的CSS专门针对黑暗模式。 Gmail会替换工作表中的颜色值，而Outlook会内联深色模式颜色值，并向其添加！important，使其无法在工作表中覆盖它。
The bad news is that we cannot specifically target Dark Mode via CSS in email via @media query or generated class name for Gmail or Outlook. Gmail replaces color values in the sheet and Outlook will inline Dark Mode color values and adds an !important to them and makes it impossible to override it in the sheet.
解决方案
在Google和Microsoft提供解决方案之前，最好的方法是接受这一现实，并设计出无论背景如何都可以工作的电子邮件用户选择查看它们的颜色。
Until Google and Microsoft offer a solution, the best approach forward is to accept this is a reality and design emails that work no matter what the background color the user chooses to view them. More users are adopting Dark Mode, so it's only going to become more popular going forward.
祝你好运。
这篇关于替代Outlook黑暗模式按钮背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
