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

jes*_*ica 7 css email gmail ios ios-darkmode

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

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

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

有什么措施可以防止黑暗模式将我们的文本从黑色变成白色?

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

编辑:这与任何应用程序代码均不相关,因此不适用针对黑暗模式开发iOS的准则。这仅是iOS 13上处于黑暗模式下的Apple邮件应用如何显示HTML电子邮件的问题。

Nat*_*han 26

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

简单地把它放在<head>

<meta name="color-scheme" content="only">
Run Code Online (Sandbox Code Playgroud)

“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>
Run Code Online (Sandbox Code Playgroud)

为此,请在 Litmus 论坛上Brian Thies 致谢


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

苹果提供了这样一种方式,在<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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

(请提供代码以供进一步查询。)


jes*_*ica 12

感谢@FrankSchlegel 提供的链接

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

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