30

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

在最终获得屏幕截图后,我们了解到该问题发生在使用深色模式的 iPhone 上。到目前为止,他们都是将 gmail 与 Mail 应用程序或 Safari 一起使用的客户(两者都有相同的问题)。我不确定gmail因素是否相关或巧合。

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

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

我应该注意到我们还在电子邮件中嵌入了一个二维码,所以我担心允许暗模式继续为我们的完整电子邮件重新着色的解决方案,因为我相信这会使二维码更难被识别.

编辑:这与任何应用程序代码无关,因此不适用为暗模式开发 iOS 的指南。这只是 iOS 13 上的 Apple 邮件应用程序在暗模式下如何显示 HTML 电子邮件的问题。

4

3 回答 3

30

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

简单地把它放在<head>

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

“Only”是“Light 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 to Brian Thies 在 Litmus 论坛上为此


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

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>

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

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

所以默认情况下,你会有白色背景,黑色文本;在深色模式下,它将是带有浅色文本的深色背景。

(如有任何进一步的查询,请提供代码。)

于 2019-11-11T05:18:13.797 回答
16

感谢@FrankSchlegel 提供的链接

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

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

于 2019-10-03T19:22:42.653 回答
0

这听起来有些可疑,但我在我们公司也遇到了同样的问题。黑暗模式让我们的邮件看起来很恶心。

我们解决这个问题的方法是在电子邮件页脚添加图像(即我们公司的徽标)。

这解决了暗模式问题,并且电子邮件在两种模式下看起来都像我们设计的那样。这是一个简单的 hack,希望其他人也能从中受益。

于 2022-02-14T15:03:04.337 回答