（本文最初发表于2022年10月。更新于2024年10月7日。）
深色模式（也是夜间模式）将继续存在，并且有充分的理由：
- 看起来更好看并且更具视觉吸引力
- 这可以节省电池寿命
- 它通过使用最少的能量来照亮各个像素来延长某些显示器的使用寿命。
事实上，2022 年，35% 的消费者在深色模式下打开企业邮箱。
快到 2025 年了，您不能再拖延优化深色模式的企业邮箱营销活动了。
请注意，在 Apple iOS 用户中，深色模式的采用率高达 70%。此外，就市场份额而言，Apple Mail 远远领先于 Gmail、Yahoo 和 Outlook，占据消费市场 56% 的份额。
显然，您不能再发起短视的企业邮箱营销活动。光明与黑暗是必经之路。
在这篇博文中，您将了解如何针对深色模式优化 Apple Mail。
我们已经这样做了 5 年，我们知道有多少事情可能会失败，从而导致意外的失误。
当涉及到黑暗模式时，你再小心也不过分！
但作为介绍就足够了。让我们按以下顺序开始：
深色模式优化：初步说明
与 Yahoo、AOL 和 Gmail（桌面版）不同，Apple Mail 在没有暗模式元标记的情况下不会自动更改颜色。
但是，包含没有适当样式的暗模式元标记可能会导致部分反转，即浅色背景变暗，深色文本变亮。
其次，Apple Mail 中的纯文本企业邮箱，即使没有 HTML 元素，也可以触发深色模式主题。一个方便的解决方法是使用 2×1 图像而不是 1×1 图像。稍大的图像可以遮挡深色模式主题，同时仍保持企业邮箱纯文本的整体氛围。
以下是针对深色模式优化 Apple Mail 的五种最佳实践：
1. 尝试背景颜色
要改善订阅者的 Mac Mail 深色模式阅读体验，请尝试调整企业邮箱的背景颜色。
考虑使用白色以外的背景颜色，这些颜色在视觉上很有吸引力，并且在明亮和黑暗的环境中都能很好地工作。
2. 使用辅助功能切换器
优化暗模式的另一种有效方法是使用辅助功能切换器。此功能利用 Web Kit 定位来允许用户轻松地在浅色和深色设计之间切换。
通过实现复选框，用户可以根据切换状态动态更改文本颜色和背景样式。这种交互不仅在 Apple Mail 中受支持，而且在 iOS Mail 和 Outlook for Mac 中也受支持。下面是 Mac OS Mojave 深色模式下的颜色：
- 上下文：#2d2d2d
- 文字颜色：#dfdfdf
- 链接颜色：#1b89ef
这些值有助于创建一个交互式选择器，将您的设计转换为使用背景颜色 #2d2d2d，与 Mac Mail 的深色模式设计相匹配。此外，它允许您使用深色模式使用的标准文本颜色，为您的订阅者提供流畅的阅读体验。
3. 优化深色模式下的图像
在深色模式 HTML 企业邮箱模板中嵌入图像时，请考虑自由使用分隔符和分隔符以保持一致的设计语言。这有助于避免模型设计不一致。还要避免添加与背景颜色匹配的图像，而选择透明 PNG。
4. 深色模式标志设计
如果您希望徽标与深色和浅色模式兼容，最好创建两个版本。
对于用于浅色模式的版本，请添加描边，以便图像与背景颜色无缝混合，并在企业邮箱客户端不支持深色模式时脱颖而出。
当专门为 Mac Mail 的深色模式设计时，请选择与深色背景形成鲜明对比的颜色，或者考虑将深色版本徽标保持为完全白色以避免复杂化。
5. 优化深色模式的文本
在企业邮箱中创建暗模式设计时，最好使用实时文本而不是图像中的文本。这种方法可以显着提高企业邮箱的送达率和可访问性。
如果您打算将黑色文本作为图像叠加在白色背景上，我们建议使用透明 PNG，并在文本周围添加描边，以确保其在默认照明模式下与背景无缝融合。
现在让我们看看为 Apple Mail 创建深色模式优化的企业邮箱模板的步骤。
第 I 步：创建基本 HTML 结构
首先，我们将从基本的 HTML 结构开始，其中包含所有必要的标签，例如 DOCTYPE、head、html 和 body 标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Template</title>
<style>
/* Basic styles will go here */
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Our Newsletter</h1>
<p>Thank you for subscribing!</p>
<a href="#">Read More</a>
</div>
</body>
</html>
第二步：设置照明模式样式
然后，我们在样式部分定义灯光模式样式，如图所示。
<style>
/* Light Mode Styles */
body {
background-color: #ffffff; /* Light background */
color: #000000; /* Dark text */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
padding: 20px;
}
a {
color: #1e90ff; /* Bright link color */
text-decoration: none;
}
h1, h2, h3 {
margin: 0;
}
</style>
为了添加深色模式样式，我们使用媒体查询，以便在用户启用深色模式显示时背景和文本颜色发生变化。
<style>
/* Light Mode Styles */
body {
background-color: #ffffff; /* Light background */
color: #000000; /* Dark text */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
padding: 20px;
}
a {
color: #1e90ff; /* Bright link color */
text-decoration: none;
}
h1, h2, h3 {
margin: 0;
}
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #000000; /* Dark background */
color: #ffffff; /* Light text */
}
a {
color: #1e90ff; /* Bright link color for dark mode */
}
}
</style>
第四步：针对深色模式优化图像
我们现在使用 CSS 滤镜优化图像，将其反转为暗模式。
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #000000; /* Dark background */
color: #ffffff; /* Light text */
}
a {
color: #1e90ff; /* Bright link color for dark mode */
}
img {
filter: brightness(0) invert(1); /* Invert images for dark mode */
}
}
</style>
第五步：最终的HTML代码
这是我们的暗模式优化企业邮箱的最终代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Template</title>
<style>
/* Light Mode Styles */
body {
background-color: #ffffff; /* Light background */
color: #000000; /* Dark text */
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
padding: 20px;
}
a {
color: #1e90ff; /* Bright link color */
text-decoration: none;
}
h1, h2, h3 {
margin: 0;
}
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #000000; /* Dark background */
color: #ffffff; /* Light text */
}
a {
color: #1e90ff; /* Bright link color for dark mode */
}
img {
filter: brightness(0) invert(1); /* Invert images for dark mode */
}
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to Our Newsletter</h1>
<p>Thank you for subscribing!</p>
<a href="#">Read More</a>
<img src=" alt="Example Image" />
</div>
</body>
</html>
这是我们设计的暗模式优化的上线前企业邮箱的示例。
供开发人员使用的深色模式代码片段
以下是与暗模式相关的所有代码片段的列表。
暗模式的媒体查询
@media (prefers-color-scheme: dark) {
/* Dark Mode styles go here */
}
背景和文字颜色
@media (prefers-color-scheme: dark) {
body {
background-color: #000000; /* Dark background */
color: #ffffff; /* Light text */
}
}
链接颜色
@media (prefers-color-scheme: dark) {
a {
color: #1e90ff; /* Bright link color for dark mode */
}
}
形象管理
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0) invert(1); /* Invert images for dark mode */
}
}
深色模式的特定类样式
@media (prefers-color-scheme: dark) {
.your-class {
background-color: #333333; /* Darker background for specific element */
color: #ffffff; /* Light text for specific element */
}
}
按钮样式
@media (prefers-color-scheme: dark) {
.button {
background-color: #1e90ff; /* Bright button background */
color: #ffffff; /* Light text color */
}
}
边框和阴影调整
@media (prefers-color-scheme: dark) {
.card {
border: 1px solid #444444; /* Lighter border for visibility */
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1); /* Subtle shadow */
}
}
备用颜色
@media (prefers-color-scheme: dark) {
.fallback {
background-color: #222222; /* Fallback dark color */
color: #cccccc; /* Fallback light text color */
}
}
地图和容器样式
@media (prefers-color-scheme: dark) {
.container {
background-color: #1a1a1a; /* Dark container */
color: #e0e0e0; /* Light text for container */
}
}
文本阴影以获得更好的可读性
@media (prefers-color-scheme: dark) {
h1, h2, h3, p {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Subtle shadow for text */
}
}
页眉和页脚样式
@media (prefers-color-scheme: dark) {
header, footer {
background-color: #1c1c1c; /* Dark header/footer */
color: #ffffff; /* Light text */
}
}
避免颜色冲突
@media (prefers-color-scheme: dark) {
.highlight {
background-color: #555555; /* Highlight color for elements */
color: #ffffff; /* Light text for highlights */
}
}
通过企业邮箱提供深色模式客户支持
企业邮箱客户端在不断发展。就深色模式而言，不同客户的支持程度差异很大。更不用说设备和操作系统也会影响深色模式的实施。
下表受 Litmus 支持表启发，显示了跨企业邮箱客户端、设备和操作系统对暗模式的支持级别。
有关企业邮箱中深色模式的更多信息
在我们的博客企业邮箱中获取有关深色模式的更多信息：
需要帮助设计针对暗模式优化的企业邮箱吗？通过企业邮箱联系我们的营销团队。
