重写Outlook暗模式按钮背景
我正试图在我的电子邮件模板中添加对黑暗模式的支持，但是当涉及到Outlook时，我遇到了一个问题。由于某些原因，Outlook部分重写了“我的”按钮的背景，导致其显示错误：
该按钮的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>该按钮具有以下内联样式(为您的召集人设置格式)：
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" />谢谢!
回答 6
Stack Overflow用户
发布于 2020-05-07 17:38:22
坏消息是，我们不能通过电子邮件中的CSS，通过@media查询或为Gmail或Outlook生成类名来专门针对黑暗模式。Gmail将替换工作表中的颜色值，Outlook将内联暗模式颜色值，并添加对其重要的值，使其无法在工作表中覆盖。
溶液
在谷歌和微软提供解决方案之前，最好的方法是接受这是一个现实，并设计电子邮件，不管用户选择什么背景颜色来查看它们。越来越多的用户采用黑暗模式，因此它只会在未来变得更受欢迎。
祝好运。
Stack Overflow用户
发布于 2020-10-07 01:48:58
Outlook.com和Outlook (Windows/Mac/Android/iOS)将反转/调整大多数颜色，但出于某些原因，它们不调整边框颜色，这就是为什么<a>标签的边框是原始颜色的原因，但<a>的background-color已被调整为暗模式。尝试使用border-color: transparent;。
Stack Overflow用户
发布于 2021-03-31 22:46:19
图像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!
https://stackoverflow.com/questions/61657885
复制相似问题
腾讯云开发者
