blocks|key|3033853|text|坏消息是，我们不能通过电子邮件中的CSS，通过@media查询或为Gmail或Outlook生成类名来专门针对黑暗模式。Gmail将替换工作表中的颜色值，Outlook将内联暗模式颜色值，并添加对其重要的值，使其无法在工作表中覆盖。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3033854|溶液|offset|length|style|BOLD|3033855|在谷歌和微软提供解决方案之前，最好的方法是接受这是一个现实，并设计电子邮件，不管用户选择什么背景颜色来查看它们。越来越多的用户采用黑暗模式，因此它只会在未来变得更受欢迎。|3033856|祝好运。|3033857|entityMap^0|0|0|2|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

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.

Solution

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.

Good luck.

blocks|key|509376|text|哪一种前景？(+Windows的Outlook桌面，2007-19年？Mac的Outlook桌面？Android的前景？iOS？Outlook.com/365网络邮件？)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|509377|你可以试试这个技巧，这是Rémi+Parmentier+(我说“可能”是因为我没有你按钮的代码)：|509378|<a+style="color:blue;">
++<span+class="dark-mode-red">…
</a>|code-block|syntax|javascript|509379|在您的<head>部分中：|offset|length|style|CODE|509380|<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>|509381|因此，从内联部分中删除background-image:+linear-gradient(#13c2c2,+#13c2c2)+!important;+(任何内联内容都将被翻译)，并将其附加到@media暗模式样式中。|509382|这是一个完整的工作示例(尽管Outlook+365+Windows显示的是黑色文本)：|509383|<!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>|509384|entityMap^0|0|0|0|3|6|0|0|B|1R|2N|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|15|8|@$K|16|L|17|M|N]|$K|18|L|19|M|N]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1A|8|@]|9|@]|A|$]]|$1|U|3|V|5|F|7|1B|8|@]|9|@]|A|$G|H]]|$1|W|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|X|$]]

Which Outlook? (Outlook desktop for Windows, 2007-19? Outlook desktop for Mac? Outlook on Android? iOS? Outlook.com/365 webmail?)

You may be able to try this trick, courtesy of Rémi Parmentier (I say 'may' because I don't have the code for your button):

<pre><code>&lt;a style="color:blue;"&gt;
 &lt;span class="dark-mode-red"&gt;…&lt;/span&gt;
&lt;/a&gt;
</code></pre>

And this in your <code>&lt;head&gt;</code> section:

<pre><code>&lt;meta name="color-scheme" content="light dark"&gt;
&lt;meta name="supported-color-schemes" content="light dark"&gt; 
&lt;style type="text/css"&gt;
@media (prefers-color-scheme: dark) {
 .dark-mode-red {color:red !important}
}
&lt;/style&gt;
</code></pre>

Thus, remove <code>background-image: linear-gradient(#13c2c2, #13c2c2) !important;</code> from your inline section (anything inline will get translated), and attach that to the <code>@media</code> dark mode style.

This is a full working example (although Outlook Office 365 Windows shows black text):

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;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"&gt;
&lt;head&gt;
 &lt;meta name="color-scheme" content="light dark"&gt;
&lt;meta name="supported-color-schemes" content="light dark"&gt; 
&lt;style type="text/css"&gt;

@media (prefers-color-scheme: dark) {
 .darkbutton {
 color:#ffffff !important;
 background-image: linear-gradient(#13c2c2, #13c2c2) !important;}
}

&lt;/style&gt;


&lt;/head&gt;
&lt;body&gt;
 &lt;td align="center" style="word-break: break-word; font-family: Helvetica, Arial, sans-serif; font-size: 16px;"&gt;
 &lt;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;"&gt;Reset your password&lt;/a&gt;
&lt;/td&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|4271823|text|嗯，你不能把背景色更改为边框的设置，这不是完全正确的。实际上，您可以在Outlook中改变这种情况来解决这个可怕的问题。但有时，这个案例就是其中之一。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4271824|您已经使用了background-image，这确实是可行的方法。将linear-gradient替换为一个1x1像素的.png文件，该文件完全包含该边框颜色，并重复该文件。那颜色是不会倒置的--毕竟是一幅图像。为了兼容起见，您可以尝试将background="file+here"作为属性应用。它会无限地重复，但这正是我们想要的。然而，该颜色将保持白色，除非您使整个按钮成为一个单独的图像。|offset|length|style|CODE|4271825|entityMap^0|0|6|G|Y|F|3B|M|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|I|$]]

Well, it's not entirely true that you cannot change the background-color to what is set for the border. You actually can change that to tackle this hellish issue in Outlook. Sometimes though, and this case is one of those 'sometimes'. 

You use <code>background-image</code> already and that is indeed the way to go. Replace the <code>linear-gradient</code> by a 1x1 pixel .png file that exactly contains that border-colour and repeat that. That color will not be inverted - it's an image after all. For the sake of compatibility, you could try to apply <code>background="file here"</code> as an attribute. It will repeat infinitely, but it's exactly what we want. The color will, however, remain white, unless you make that entire button a separate image.

blocks|key|4271838|text|取出标签上的背景色元素。你已经有了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4271839|background-image:linear-gradient(#13c2c2,+#13c2c2)|code-block|syntax|javascript|4271840|这就是你所需要的。|4271841|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Take out the background-color element on your a tag. You already have the
<pre><code>background-image:linear-gradient(#13c2c2, #13c2c2)
</code></pre>
and that's all you need.

blocks|key|4271871|text|Outlook.com和Outlook+(Windows/Mac/Android/iOS)将反转/调整大多数颜色，但出于某些原因，它们不调整边框颜色，这就是为什么<a>标签的边框是原始颜色的原因，但<a>的background-color已被调整为暗模式。尝试使用border-color:+transparent;。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4271872|entityMap^0|29|3|2R|3|2V|G|3O|Q|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

Outlook.com and Outlook (Windows/Mac/Android/iOS) will invert/adjust most colours, but for some reason they don't adjust border colours, which is why your <code>&lt;a&gt;</code> tag's borders are the original colour, but the <code>background-color</code> of the <code>&lt;a&gt;</code> has been adjusted for dark mode. Try using <code>border-color: transparent;</code>.

blocks|key|4271909|text|图像1x1px背景%2B颜色=防弹按钮颜色：<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!|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4271910|entityMap|0|LINK|mutability|MUTABLE|url|https://path-to-the-1px-image.png/^0|K|8V|78|X|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]]|D|@$9|Q|A|R|1|S]]|E|$]]|$1|F|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

Image 1x1px background + color = bulletproof button color:
<code>
&lt;a href=&quot;https://ilovecode.com&quot; 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;&quot;&gt;GO!
</code>

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:

<a href="https://i.stack.imgur.com/enKQv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enKQv.png" alt="enter image description here"></a>

The HTML for the button is as follows:

<pre><code>&lt;td align="center" style="word-break: break-word; font-family: &amp;quot;Nunito Sans&amp;quot;, Helvetica, Arial, sans-serif; font-size: 16px;"&gt;
 &lt;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;"&gt;Reset your password&lt;/a&gt;
&lt;/td&gt;
</code></pre>

The button has the following inline style (formatted for your convenince):

<pre class="lang-css prettyprint-override"><code>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;
</code></pre>

Additionally, I've already added the following to the <code>&lt;head&gt;</code> section of my email.

<pre><code>&lt;meta name="color-scheme" content="light dark" /&gt;
&lt;meta name="supported-color-schemes" content="light dark" /&gt;
</code></pre>

Thanks!

Override Outlook dark mode button background

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我正试图在我的电子邮件模板中添加对黑暗模式的支持，但是当涉及到Outlook时，我遇到了一个问题。由于某些原因，Outlook部分重写了“我的”按钮的背景，导致其显示错误：​​该按钮的HTML如下：<td align="center" style="word-break: break-word; font-family...

问重写Outlook暗模式按钮背景
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问重写Outlook暗模式按钮背景EN