logo标签列表

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

ioscssemailgmailios-darkmode
35
我们有一个电子商务应用程序，每当进行购买时便会发送订单详细信息，我们刚刚重新设计了该电子邮件模板。在过去几天中，我们收到了一些客户报告，称他们的电子邮件中有一半的文本丢失了。
最终获得截图后，我们发现这个问题是在使用黑暗模式的 iPhone 上发生的。到目前为止，他们都是使用 Gmail 的客户，无论是 Mail 应用还是 Safari 浏览器（两者都有同样的问题）。我不确定 Gmail 这个因素是否相关或是巧合。
我们的电子邮件很简单--具有白色背景、灰色标题和黑色正文文本。黑暗模式只影响了正文文本，将其从黑色更改为白色，而白色文本在白色背景上显然是看不见的，使得电子邮件似乎缺少大量内容。
有没有办法防止黑暗模式将我们的文本从黑色更改为白色？
我应该注意到，我们的电子邮件中还嵌入了一个 QR 代码，因此我担心解决方案可能会允许黑暗模式重新着色整个电子邮件，因为我认为这将使 QR 码更难被识别。
编辑:这与任何应用程序代码无关，因此不适用于开发 iOS 的黑暗模式指南。这只是一个关于苹果公司在 iOS 13 的 Mail 应用中如何显示 HTML 电子邮件的问题。
可能是 iOS13 UIKit 的 textColor 白色问题 的重复问题。 - Pratik Sodha
如果您明确设置字体颜色会发生什么？我认为暗模式只有在使用默认颜色时才会将字体更改为白色。 - Frank Rupprecht
3
相关文章：https://webkit.org/blog/8840/dark-mode-support-in-webkit/（说明：该文章介绍了WebKit对暗黑模式的支持）WebKit现在支持暗黑模式。在macOS Mojave中，用户可以选择使用暗黑模式来使系统更加容易在低光照条件下使用。这种模式通过反转颜色方案来实现：亮色变暗，暗色变亮。为了确保Web内容在不同的外观模式下都能很好地呈现，WebKit引入了新的CSS媒体查询功能，称为prefers-color-scheme。开发人员可以使用它来检测用户是否启用了暗黑模式，并相应地调整其网站或应用程序的外观。如果用户在macOS Mojave中启用了暗黑模式，则WebKit将自动使用适当的颜色方案渲染网站和应用程序。此外，WebKit还允许开发人员定义自己的颜色方案，以便在不同的外观模式下都能够呈现出最佳的外观效果。WebKit对暗黑模式的支持为开发人员提供了一个简单而强大的工具，以确保他们的Web内容在任何情况下都能正确呈现，并提供最佳的用户体验。 - Frank Rupprecht
@PratikSodha 那个问题涉及到iOS应用程序，我只是在谈论在苹果的邮件应用程序中以暗模式显示的HTML电子邮件。 - jessica
@FrankSchlegel 颜色和背景颜色已经在所有地方都被明确设置了，但仍然被移动。你提供的链接给出了答案，我不得不在所有元素上设置 color-scheme: light only。非常感谢。 - jessica
4个回答
36
你可以在苹果设备上强制删除此项，但现在我们在Mac上有Gmail和Outlook却没有停止它们的方法。
只需将此代码放入中：
<meta name="color-scheme" content="only">

“Only”是“仅限亮色”（也仍然有效）的缩写。

这将修复iPhone暗模式和Apple Mail，但不包括Mac上的Outlook或Gmail。

您目前可以覆盖Outlook on Mac，但没有已知的Gmail黑科技。

以下是如何覆盖Outlook on Mac：

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

感谢Brian Thies在Litmus论坛上提供的帮助

但最好的方法是尝试修复根本问题，而不是删除客户想要的功能（暗黑模式）。 苹果提供了一种方法，在<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;">

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

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

19
0
首先，在苹果的电子邮件客户端（Apple Mail、iOS Mail、iOS 13）中，暗黑模式只适用于“个人邮件”。虽然很难找到这个术语的确切定义，但据我们了解，个人邮件是指不包含任何可见图像的邮件 - 即包含有限数量HTML元素的“混合”邮件。（感到困惑吗？您可以在我们的纯文本与HTML邮件博客中阅读更多关于混合邮件的内容）
这意味着带有不可见跟踪像素的HTML格式邮件将被视为个人邮件，而带有主要图片的传统营销邮件则不会。值得注意的是，纯文本邮件始终被视为个人邮件。 原始来源 实际上对我们有帮助的是：
    <table class="py-[32px] text-center" width="100%">
        <tr>
            <td>
                <img style="width:100%" alt="logo" src="{{ $heroImg }}">
            </td>
        </tr>
    </table>

将style="width:100%"添加到img元素中。这样可以防止在开启深色模式的iOS手机上出现邮件变暗的情况。看起来这确保了邮件不再被认为是私人的。
这对我在iOS Apple Mail上有效，但对iOS Spark应用程序无效。 - undefined
-2

听起来有点可疑，但我们公司也遇到了同样的问题。深色模式使我们的邮件看起来很恶心。

我们找到的解决方法是在电子邮件页脚添加一张图片（即我们公司的标志）。

这解决了深色模式的问题，使得邮件在两种模式下看起来都像我们设计的那样。这是一个简单的技巧，希望其他人也能从中受益。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接