Outlook 中圆形按钮的电子邮件 CSS，可控制暗模式颜色

Question

此按钮使用记录良好的 VML 解决方案，可以在 Outlook 中呈现出色的效果，但仅在轻型模式下有效。在黑暗模式下，我失去了对“填充颜色”的控制，并得到了这种黑色的覆盖物，遮盖了奶油色——这就是我想要的颜色。解决方案？

<table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
  <tr>
    <td class="content" align="left" style="background-color: #EFE9D9;  font-family: 'Inter', Arial, sans-serif; padding-top:40px; padding-bottom: 40px;">
      <table align="left" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
        <tr>
          <td class="content" align="left" style="background-color: #EFE9D9; font-family: 'Inter', Arial, sans-serif">           
            <!--[if mso]>
              <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" 
              href="cnn.com" 
              title="cnn" 
              style="height:68px;v-text-anchor:middle;width:340;margin-left:25px; margin-right:25px;" 
              arcsize="58.82352941176471%" stroke="f" fillcolor="#181818"><w:anchorlock/>
              <center>
            <![endif]-->
            <a href="%%=v(@Button_URL)=%%" class="dark-button button-td-primary" title="%%=v(@Button_title)=%%" alias="%%=v(@Button_alias)=%%" 
            style="text-decoration:none;
                  color:#EFE9D9;
                  background-color:#181818;
                  border-radius:40px;
                  border-top:0px;
                  font-weight:600;
                  border-right:0px;
                  border-bottom:0px;
                  border-left:0px;
                  padding-top:15px;
                  padding-bottom:15px;
                  font-family:'Inter', Arial, sans-serif;
                  font-size:16px;
                  text-align:center;
                  mso-border-alt:none;
                  word-break:keep-all;
                  mso-shading: transparent">
              <span style="padding-left:25px;
                padding-right:25px;
                font-size:16px;
                display:inline-block;
                letter-spacing:normal;
                word-break: break-word;">
                  Click me to visit cnn
              </span>
            </a>
            <!--[if mso]></center></v:roundrect><![endif]-->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

不幸的是，你已经拥有了可以期待的最好的东西。

官方表示，Outlook Windows 根本不支持深色模式。它应用了“盲目反转”，这意味着即使是深色也会变成浅色 - 当它试图使您的电子邮件变暗时，它会翻转所有内容。 （有关完整详细信息，请参阅 https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers）

为其开发的唯一黑客适用于文本颜色，但值得庆幸的是，至少您的深色模式按钮仍然具有很大的对比度。 （请参阅此处的黑客：https://webdesign.tutsplus.com/how-to-fix-outlook-dark-mode-problems--cms-37718t）

如果它绝对必须是白色的（请记住，拥有深色模式 Outlook 桌面的人很少，甚至 Outlook 桌面现在也正在积极地替换为与 Outlook.com 非常相似的新 Outlook），您可以使用图像 - 但您会失去辅助功能，对于 Outlook 桌面用户来说，他们必须有意识地点击下载图片才能看到。