OL Office 365 Dark for Windows 文本背后的背景

Question

我有一封电子邮件，可以在深色模式下正确渲染或逻辑翻转颜色，除了 OL Office 365 Dark for Windows 和 Outlook 2021 Dark for Windows 之外，仅副本后面有不同的翻转背景，而不是整个元素，而且复制颜色从白色翻转为黑色，这使得某些部分看起来很奇怪：

这是我其中一个的代码：

<tr>
                  <td align="center" style="text-align:center; background-color:#7F3342;">
                    <!--[if mso]>
                    <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:600px;" stroke="f" fillcolor="#7F3342">
                      <w:anchorlock/>
                        <center>
                    <![endif]-->
                    <a href="#"
                      target="_blank" rel="noopener" class="graphic"
                      style="text-align:center; background-color:#7F3342; color:#fff; display:inline-block; text-decoration:none; width:600px; font-family:Helvetica, Arial, sans-serif; font-size:14px; letter-spacing: 1.5px; font-weight:600; line-height:40px; -webkit-text-size-adjust:none; white-space: nowrap;">
                      SUBSCRIBE TO OUR NEWSLETTER
                    </a>
                    <!--[if mso]>
                        </center>
                      </v:rect>
                    <![endif]-->
                  </td>
                </tr>

期望文本背后也是酒红色，没有浅色柔和的颜色，以及白色的复制颜色，这就是它在其他地方呈现的方式。

Answer 1

我不认为 Outlook 365/桌面深色模式有基于代码的解决方案。

电子邮件客户端不提供官方支持：https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

但是有一个针对 text 的破解方法 - 但不是背景颜色 AFAIK：https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems--cms-37718t

考虑到这些限制，如果必须的话，最好的选择是有条件地创建一个图像按钮。由于无论如何您都有 VML 解决方案（尽管对于非圆角按钮来说不是必需的），因此您不会失去可访问性 - 因为 VML 从链接中创建图像，而屏幕阅读器不会读取 VML。

所以你可以写：

    <td align="center" style="text-align:center; background-color:#7F3342">
<a href="#" target="_blank" rel="noopener" class="graphic" style="text-align:center; background-color:#7F3342; color:#fff; display:inline-block; text-decoration:none; width:600px; font-family:Helvetica, Arial, sans-serif; font-size:14px; letter-spacing: 1.5px; font-weight:600; line-height:40px; -webkit-text-size-adjust:none; white-space: nowrap;">
                  <!--[if !mso]><!-->SUBSCRIBE TO OUR NEWSLETTER<!--<![endif]-->
<!--[if mso]><img src="https://via.placeholder.com/200x50" alt="Subscribe to our newsletter" width="200" /><![endif]-->
                </a>
    </td>