Question

我们有一个电子商务应用程序，可以在购物时发出订单详细信息，我们只是重新设计了该电子邮件模板。在过去几天中，我们收到了一些客户报告，其中电子邮件中的一半文本丢失了。

在最终获得了屏幕截图之后，我们了解到问题是在使用暗模式的iPhone上发生的。到目前为止，他们都是通过Mail应用程序或Safari使用gmail的客户（两者都有相同的问题）。我不确定gmail因素是否相关或偶然。

我们的电子邮件很简单-背景为白色，标题为灰色，正文为黑色。深色模式使白色背景和灰色标题保持不变，但是正文文本从黑色更改为白色。在白色背景上，白色文本显然是不可见的，并且电子邮件看起来缺少大量内容。

有什么办法可以防止黑暗模式将我们的文本从黑色变成白色？

我应该注意，我们的电子邮件中还嵌入了QR码，因此，我担心解决方案将使深色模式继续为我们的完整电子邮件重新着色，因为我认为这会使QR码更难处理被认可。

编辑：这与任何应用程序代码均无关，因此不适用于针对黑暗模式开发iOS的准则。这仅仅是一个问题，有关iOS 13上的苹果Mail应用程序在黑暗模式下如何显示HTML电子邮件。

Answer 1

您可以在Apple设备上强行删除它，但是现在我们在Mac上拥有Gmail和Outlook，无法阻止它们。

只需将其放入<head>：

<meta name="color-scheme" content="only">

“仅”是“仅光”的缩写（仍然有效）

这将适用于iPhone暗模式和Apple Mail，但不适用于Mac或Gmail上的Outlook。

您目前可以在Mac上覆盖Outlook，但是Gmail尚无已知的黑客手段。

以下是在Mac上为Outlook覆盖的方法：

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HT至Brian Thies on Litmus forum for this

但是最好是尝试解决根本问题，而不是删除客户想要的功能（暗模式）。

Apple在<head>中提供了这样一种方式：

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

此外，请确保背景颜色最外面的元素具有“暗模式”类，例如

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

因此，默认情况下，您将拥有白色背景，黑色文字；在暗模式下将是带有浅色文字的暗背景。

（请提供代码以供进一步查询。）

Answer 2

感谢@FrankSchlegel提供的链接

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

答案是在所有元素的CSS中使用color-scheme: light only

。谢谢！

如何防止iOS 13黑暗模式破坏电子邮件

2 个答案: