HTML邮件中的深色模式：你需要知道的一切。

随着 iOS 13 的更新，Apple Mail 获得了深色主题，并成为首个支持prefers-color-schemeCSS 媒体查询的主流电子邮件客户端——这意味着您现在可以专门针对深色和浅色主题设计电子邮件。

我非常喜欢深色模式，而刺眼的亮色邮件简直是我的克星。所以当我在 iOS 13 中了解到深色模式后，我做了唯一显而易见的事情——订购了一部全新的 iPhone 来测试一下。

趁此机会，我还测试了几乎所有电子邮件客户端（包括出了名的 Outlook）的深色模式，以下是我的发现。

什么是 prefers-color-scheme？这是
一个prefers-color-schemeCSS 媒体查询，用于检测用户偏好浅色主题还是深色主题，从而可以针对这两种主题分别设计电子邮件。随着 iOS 13 的更新，大多数主流电子邮件客户端对该功能的支持率从 2.3% 跃升至 38.4%！这得益于 Apple Mail 的流行，可谓是巨大的进步。令人惊讶的是，在 Apple Mail 之前，Outlook 是唯一支持此功能的电子邮件客户端。

常用电子邮件客户端的深色模式是如何运作的

为了使邮件本身呈现深色，邮件客户端会在后台自动反转邮件的颜色。对于普通的用户间邮件，这种方式在所有邮件客户端中都能很好地实现，并且效果一致。

然而，对于自定义 HTML 电子邮件（也就是我们收件箱里最常见的邮件）来说，情况就没那么简单了。我指的是交易邮件和促销邮件。

以下是我发现的不同邮件客户端在处理深色模式邮件渲染方面存在的差异：

我无法在这里完整展示我测试的所有数据，请访问原帖查看其余内容，包括每个电子邮件客户端的屏幕截图。

* 由于无法可靠地区分不同平台，同一电子邮件客户端在所有平台上的受欢迎程度相同。受欢迎程度数据来源：Litmus，《2019 年电子邮件客户端市场份额》。

如何让 HTML 电子邮件支持深色模式

我已经开始使用这些数据，并且在解决了一些 Outlook 相关问题后，成功地让我们的电子邮件支持深色模式。以下是实现相同功能的方法：

数据显示：
超过 55% 的电子邮件可能在启用深色模式后打开。一旦 Gmail 也支持深色模式，启用深色模式后打开的电子邮件比例将飙升至 83%！

1）调整颜色

请注意，Apple Mail 仅在背景颜色为透明或未指定时才会反转颜色——白色背景不会反转。确保邮件不会刺眼的最简单方法是检查是否指定了背景颜色。如果需要更精细地控制设计，这时就prefers-color-scheme派上用场了。

语法（@media prefers-color-scheme）：

<style>
    /* Your light mode (default) styles: */
    body {
        background: white;
        color: #393939;
    }

    @media (prefers-color-scheme: dark) {
        /* Your dark mode styles: */

        body {
            background: black;
            color: #ccc;
        }
    }
</style>

设计小技巧：避免使用纯白色#fff作为文本颜色。我发现主文本的对比度在 11.5 左右是一个不错的折衷方案，既不会太亮也不会太暗。您可以在这里查看对比度：https://contrast-ratio.com或使用 Chrome 开发者工具。

2）切换浅色和深色标志

深色背景上的深色文字几乎看不见，如果在启用了深色模式的电子邮件客户端中查看徽标，就会出现这种情况。

如今，典型的Logo通常采用透明背景、彩色图标和深色文字。看出问题了吗？因为邮件客户端不会反转图片颜色，所以你需要自己处理。

要解决这个问题，你可以：

1. 最简单的解决方法是保存徽标时使用白色背景而不是透明背景，但我并不推荐这种方法——深色模式用户会不满意。
2. 将浅色徽标放在深色背景上，邮件其余部分则使用白色背景（参考 Litmus 的做法）。
3. 将电子邮件的默认设置设为深色模式，Spotify 就是一个不错的选择，因为他们的应用只提供深色主题。
4. 同时包含徽标的浅色和深色版本，并通过prefers-color-scheme媒体查询进行切换。

我最喜欢最后一种方法，具体做法如下：

Simple "display: none"on dark logo 在所有现代电子邮件客户端中都能正常显示，但出乎所有人意料的是，在 Outlook 和 Windows 10 邮件中却不行。

在 CSS 样式中：

<style>
    @media (prefers-color-scheme: dark) {
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

以及HTML结构：

<image src="dark-logo.png" class="darkLogo" />

<!--
    To hide the light logo perfectly in Outlook and Windows 10 Mail, 
    you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

这种方法效果不错，但仍然无法在所有情况下都完美运行。深色背景上的深色文字问题会出现在支持深色模式但不支持此功能的邮件客户端中prefers-color-scheme。这些客户端包括 Outlook、Windows 10 自带邮件、Zoho，以及可能还有 Gmail。

为了确保电子邮件中的徽标万无一失，我将结合上述方法 1) 和 4) 进行处理。方法 1) 将涵盖所有支持深色模式的电子邮件客户端，但不包括prefers-color-scheme。而方法 4) 将涵盖 Apple Mail、macOS 上的 Outlook 和 Outlook.com，它们都支持深色模式和 。

另外，我不会将徽标保存在白色背景上，而是会添加 3 像素宽的背景匹配边框，并像往常一样将其保存在透明背景上。

看起来有点复杂（仅仅是一个logo而已），所以我们先来看看HTML标记：

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
    <image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>

<!-- Dark theme (so light logo): 
This is for Apple Mail, Outlook on macOS, Outlook.com -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
    <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

以及 CSS 样式：

<style>
    @media (prefers-color-scheme: light) {
        .darkLogoDefault,
        .lightLogo {
            display: none !important;
        }

        .darkLogoWrapper,
        .darkLogo {
            display: block !important;
        }
    }

    @media (prefers-color-scheme: dark) {
        .darkLogoDefault,
        .darkLogo {
            display: none !important;
        }

        .lightLogoWrapper,
        .lightLogo {
            display: block !important;
        }
    }
</style>

Gmail 的深色模式即将到来

Android 10 即将推出深色模式，Gmail 也终于要全面支持深色模式了。你只需要 Android 10 系统和最新版本的 Gmail（至少是 2019.09.01.268168002 版本）。不过，谷歌通常会通过服务器端推送的方式逐步为用户启用新功能（比如这次的深色主题），而我目前还没遇到这种情况。

我很想知道 Gmail 是否会支持@media prefers-color-scheme。从我目前了解到的情况来看，似乎希望渺茫。看来我们只能拭目以待了。一旦我在 Gmail 中启用了深色主题，我就会更新这篇文章。

总结

HTML邮件即将推出深色模式，我太喜欢了！但是，这又多了一件需要操心的事，好像之前用HTML表格做布局还不够似的。

加入我们的邮件列表，即可随时了解电子邮件暗黑模式的最新动态。我们还会分享在构建和发展我们的 SaaS 产品Sidemail过程中遇到的挑战和见解。

感谢阅读！