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

【问题标题】：How to prevent iOS 13 Dark Mode from breaking emails如何防止 iOS 13 暗模式破坏电子邮件
【发布时间】：2020-01-30 07:51:33
【问题描述】：

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

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

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

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

我应该注意到，我们还在电子邮件中嵌入了一个 QR 码，所以我担心允许暗模式继续为我们的完整电子邮件重新着色的解决方案，因为我认为这会使 QR 码更难被认可。

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

【问题讨论】：

iOS13 White Color issue with textColor of UIKit的可能重复
如果显式设置字体颜色会怎样？我假设深色模式仅在保留默认颜色时才将字体更改为白色。
相关：webkit.org/blog/8840/dark-mode-support-in-webkit
@PratikSodha 这个问题与 iOS 应用程序有关，我只是在谈论在暗模式下显示在 Apple 邮件应用程序中的 HTML 电子邮件。
@FrankSchlegel 颜色和背景颜色在任何地方都明确设置，并且仍在移动。您提供的链接有答案，我必须在所有元素上设置color-scheme: light only。非常感谢。

标签： ios css email gmail ios-darkmode

【解决方案1】：

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

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

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

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

（请提供任何进一步查询的代码。）

【讨论】：

【解决方案2】：

感谢@FrankSchlegel 提供的链接

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

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

【讨论】：