macOS Catalina 上的 Outlook 深色模式 Office 365 背景色

Question

我想知道是否有 HTML 电子邮件开发人员可以帮助我解决这个问题。我正在使用 Email on Acid 来测试 HTML 电子邮件，我的按钮内设置的背景颜色（当颜色较浅时）正在反转。这仅发生在“macOS Catalina Dark Mode 上的 Outlook Office 365”中。有人知道如何定位它吗？这是我的 HTML/CSS:

头：

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

HTML:

<td align="center">
  <a class="darkmode-light-button" href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;background-color: #dde0e1;border-top: 12px solid #dde0e1;border-bottom: 12px solid #dde0e1;border-right: 20px solid #dde0e1;border-left: 20px solid #dde0e1;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;display: inline-block;">VIEW DEMO</a>
</td>

CSS:

/* Custom Dark Mode Colors */
:root {
    color-scheme: light dark;
    supported-color-schemes: light dark;
}
@media (prefers-color-scheme: dark) {
    .darkmode-light-button {
       background-color: #dde0e1!important;
    }
}

我也尝试过 Outlook 的 osgb 属性，但没有成功。我知道这个 () 有一个相关的 post 但没有解决方案所以我想我会在这里再试一次。

注意：将 border/background 颜色应用到 table 数据标签可以解决问题，但整个按钮当然不会充当 link。

谢谢！

Answer 1

想通了:)

<tr>
 <td align="center" style="border-radius:10px" bgcolor="#EFF8FE">
  <a href="https://example.com" target="_blank" style="font-size: 17px;font-weight: bold;text-decoration: none;color: #1e5d7b;background-color: #EFF8FE;border:1px solid #EFF8FE;border-radius:10px;padding:12px 20px;display: inline-block;">VIEW DEMO</a>
 </td>
</tr>

macOS Catalina 上的 Outlook 深色模式 Office 365 背景色

Outlook Dark Mode Office 365 on macOS Catalina Background color

outlook

darkmode