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

Question

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

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

我们的电子邮件很简单 -- 它有白色背景、灰色标题和黑色 body 文本。深色模式保留白色背景和灰色标题不变，但 body 文本从黑色变为白色。在白色的背景下，白色的文字明显看不出来，邮件看起来像是少了很多内容。

是否可以采取任何措施来防止暗模式将我们的文本从黑色变为白色？

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

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

Answer 1

感谢@FrankSchlegel

提供的link

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

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

Answer 2

您可以在 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 到 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>

此外，请确保最外层的背景色元素具有 class "darkmode"，例如

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

因此默认情况下，您将拥有白色背景和黑色文本；在深色模式下，它将是深色背景和浅色文本。

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

Answer 3

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

The solution we got to this problem was by adding a image ( i.e. logo of our company in the email footer).

这解决了深色模式问题，并且电子邮件开始在两种模式下看起来与我们设计的一样。这是一个简单的技巧，希望其他人也能从中受益。

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

How to prevent iOS 13 Dark Mode from breaking emails

css

email

gmail

ios

ios-darkmode