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

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

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

我们的电子邮件很简单——它有白色背景、灰色标题和黑色正文。暗模式将保留白色背景和灰色标题不变，但正文文本将从黑色更改为白色。在白色背景上，白色文本显然是看不见的，而电子邮件似乎丢失了大量内容

有什么方法可以防止黑暗模式将文本从黑色变为白色

我应该注意的是，我们的电子邮件中还嵌入了二维码，因此我担心的解决方案将允许黑暗模式继续重新存储我们的完整电子邮件，因为我相信这将使二维码更难被识别

---

编辑：这与任何应用程序代码都不相关，因此关于为暗模式开发iOS的指导原则不适用。这只是iOS 13上的苹果邮件应用程序在黑暗模式下如何显示HTML电子邮件的问题。

多亏了@FrankSchlegel提供的链接

---

答案是在所有元素的css中使用

配色方案：只亮

。谢谢大家!

你可以在苹果设备上强制删除，但现在我们在Mac上安装了Gmail和Outlook，无法阻止它们

只需将其放入

：

“Only”是“lightonly”的缩写（它仍然有效）

这将修复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>

.body、.darkmode、.darkmode div{/*，在body标记上带有类body，以及此处表示的具有背景色的所有元素*/
背景图像：线性梯度（#ffffff，#ffffff）！重要；
}
.darkmode p{/*为其他文本元素添加其他选择器*/
-webkit文本填充颜色：#000000！重要；
}

HT to

---

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

苹果已经提供了这样一种方式，在

中：

@介质（首选颜色方案：深色）{
.darkmode{背景色：#1e！重要；}
.darkmode p{color:#ffffff！重要；}
}

此外，确保背景色最外层的元素具有“darkmode”类，例如

因此，默认情况下，您将有白色背景，黑色文本；在暗模式下，它将是一个带有浅色文本的暗背景

---

（请提供进一步查询所需的代码。）

如果您明确设置字体颜色，可能会出现重复情况？我假设暗模式只会在保留默认颜色的情况下将字体更改为白色。相关：@PratikSodha这个问题与iOS应用程序有关，我只是说在暗模式下苹果邮件应用程序中显示的一封HTML电子邮件。@FrankSchlegel颜色和背景色在任何地方都被明确设置，并且仍在移动。您提供的链接给出了答案，我必须在所有元素上设置

配色方案：仅灯光

。非常感谢你。

<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>

<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;">