HTML 电子邮件 - 控制用户处于深色模式时颜色如何变化

Question

我正在使用 Figma 和 Emailify 为新闻通讯创建 HTML，该新闻通讯将通过 Salesforce - Pardot 中的帐户参与发送。一切都运行良好，但是当向我的处于深色模式的手机发送测试时，某些颜色变得令人不快。如何告诉接收设备显示哪种颜色，而不是 iPhone 上的 Gmail 选择的颜色。例如，它将黑色背景和白色文本的区域转换为丑陋的灰色背景和黑色文本。我宁愿它使背景变白。这是来自一个块的代码片段，显示了 Emailify 插件如何创建代码并设置默认模式的背景颜色样式。

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:600px;" width="600"><tr><td style="line-height:0;font-size:0;mso-line-height-rule:exactly;">
<![endif]-->

<div class="r ey ys" style="background:#2d2d2d !important;background-color:#2d2d2d;margin:0px auto;max-width:600px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#2d2d2d;background-color:#2d2d2d;width:100%;">
    <tbody>
        <tr>
            <td style="border:none;direction:ltr;font-size:0;padding:50px 32px 10px 32px;text-align:left;" class=""><!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:middle;width:536px;">
<![endif]-->
<div class="h1 y" style="font-size:0;text-align:left;direction:ltr;display:inline-block;vertical-align:middle;width:100%;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="border:none;vertical-align:middle;" width="100%">
    <tbody>
        <tr>
            <td align="center" class="x" style="font-size:0;word-break:break-word;">
            <div style="text-align:center;">
            <p style="Margin:0;text-align:center;mso-line-height-alt:32px;mso-ansi-font-size:28px;"><span style="font-size:28px;font-family:'Work Sans','Arial',sans-serif;font-weight:600;color:#ffffff;line-height:114%;mso-line-height-alt:32px;mso-ansi-font-size:28px;">Navigate What’s Next</span></p>
            </div>
            </td>
        </tr>
    </tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>
<![endif]--></td>
        </tr>
    </tbody>
</table>
</div>
<!--[if mso | IE]>
</td></tr></table>

我用谷歌搜索了一下，发现一些注释说这可行。

<style>
    
    @media (prefer-color-scheme : dark) {
        
        .r, .ys, .ey {
            background-color:#ffffff !important;
            background:#ffffff !important;
        }
        
    }
    
</style>

我知道重要的标签是最后的努力，但无论有没有它们都不起作用。无论如何，它仍然是#d8d8d8。

Answer 1

我已经稍微了解了如何做到这一点，但是，截至 2023 年 10 月，仅通过 CSS 似乎无法做到这一点，至少它不会覆盖移动设备的所有浏览器。

这是我找到的来源链接：https://www.litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers（向下滚动一点，你'会找到桌子）

希望有帮助。