启用nat模式 路由模式_如何在HTML电子邮件中启用暗模式：您需要了解的一切。...

启用nat模式 路由模式

With the new iOS 13 update, Apple Mail is getting a dark theme. That means it's the first major email client that supports the prefers-color-scheme CSS media query. So you can now design emails specifically for both dark and light themes.

随着新的iOS 13更新，Apple Mail成为一个黑暗的主题。 这意味着它是第一个支持“ prefers-color-scheme CSS媒体查询的主要电子邮件客户端。 因此，您现在可以专门针对深色和浅色主题设计电子邮件。

I’m a massive dark mode fan, and blindingly-bright email is my nemesis. So when I learned about dark mode in iOS 13, I did the only obvious thing and ordered a brand new iPhone to test things out.

我是深色模式的忠实拥护者，而盲目明亮的电子邮件是我的宿敌。 因此，当我了解iOS 13中的黑暗模式时，我做了唯一明显的事情，并订购了一部全新的iPhone来进行测试。

While I was at it, I also tested how dark mode works in almost all email clients, including the troublemaker Outlook. Here’s what I found.

在此期间，我还测试了暗模式在几乎所有电子邮件客户端(包括麻烦制造者Outlook)中的工作方式。 这是我发现的。

But first, what is prefers-color-scheme?The prefers-color-scheme CSS media query is used to detect whether the user prefers a light or dark theme, making it possible to design email specifically for both.

但是首先， 谁更喜欢颜色方案？ prefers-color-scheme CSS媒体查询用于检测用户是喜欢浅色主题还是深色主题，从而有可能专门为这两种主题设计电子邮件。

With the iOS 13 update, the support in most popular email clients jumped from 2.3% to 38.4%! A huge step thanks to Apple Mail's popularity. Surprisingly, Outlook was the only email client that supported this before Apple Mail.

随着iOS 13更新， 大多数流行的电子邮件客户端中的支持从2.3％跃升至38.4％ ！ 感谢Apple Mail的普及，迈出了巨大的一步。 令人惊讶的是，在Apple Mail之前，Outlook是唯一支持此功能的电子邮件客户端。

深色模式在流行的电子邮件客户端中的工作方式 (How dark mode works in popular email clients)

To render the email message dark itself, email clients invert the email’s colors automatically behind the scenes. For regular user-to-user emails, this works well and consistently in all email clients.

为了使电子邮件本身变暗，电子邮件客户端在幕后自动将电子邮件的颜色反转。 对于常规的用户对用户电子邮件，这在所有电子邮件客户端中均能很好且始终如一地工作。

However, it’s not that simple for custom HTML emails — those that fill most of our inboxes. I’m talking transactional and promotional.

但是，自定义HTML电子邮件并不是那么简单-填充我们大多数收件箱的电子邮件。 我说的是交易性和促销性。

Here’re the differences I found in how email clients handle dark mode email rendering:

这是我在电子邮件客户端处理暗模式电子邮件呈现方式时发现的差异：

Email client	Popularity	Dark UI	Auto-invert email colors	Supports @media (prefers-color-scheme)
Apple Mail iPhone + iPad	36.1%	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)
Gmail Android 10	27.8% *	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Gmail iOS 13	27.8% *	✖ No	✖ No	✖ No	(Show screenshot)
Gmail webmail	27.8% *	✔ Yes	✖ No	✖ No	(Show screenshot)
Outlook iOS 13	9.1% *	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Outlook Android 10	9.1% *	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Outlook Windows 10	9.1% *	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Outlook macOS	9.1% *	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)
Apple Mail macOS	7.5%	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Yahoo! webmail	6.3% *	✔ Yes	✖ No	✖ No	(Show screenshot)
AOL webmail	6.3% *	✖ No	✖ No	✖ No	(Show screenshot)
Outlook.com webmail	2.3%	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)
Windows 10 Mail Windows 10	0.5%	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Zoho Mail webmail	less than 0.5%	✔ Yes	✔ Yes	✖ No	(Show screenshot)
Mozilla Thunderbird Windows 10	less than 0.5%	✔ Yes	✖ No	✔ Yes	(Show screenshot)
Spark macOS	less than 0.5%	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)
Spark iOS 13	less than 0.5%	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)
Spark Android 9	less than 0.5%	✔ Yes	✔ Yes	✔ Yes	(Show screenshot)

电子邮件客户端	人气度	黑暗的UI	自动反转电子邮件颜色	支持@media(prefers-color-scheme)
苹果邮件 iPhone + iPad	36.1％	✔是的	✔是的	✔是的	(显示截图)
Gmail Android 10	27.8％*	✔是的	✔是的	✖否	(显示截图)
Gmail iOS 13	27.8％*	✖否	✖否	✖否	(显示截图)
Gmail网络邮件	27.8％*	✔是的	✖否	✖否	(显示截图)
Outlook iOS 13	9.1％*	✔是的	✔是的	✖否	(显示截图)
Outlook Android 10	9.1％*	✔是的	✔是的	✖否	(显示截图)
Outlook Windows 10	9.1％*	✔是的	✔是的	✖否	(显示截图)
Outlook macOS	9.1％*	✔是的	✔是的	✔是的	(显示截图)
苹果邮件 macOS	7.5％	✔是的	✔是的	✖否	(显示截图)
雅虎！ 网络邮件	6.3％*	✔是的	✖否	✖否	(显示截图)
AOL网络邮件	6.3％*	✖否	✖否	✖否	(显示截图)
Outlook.com网络邮件	2.3％	✔是的	✔是的	✔是的	(显示截图)
Windows 10邮件 Windows 10	0.5％	✔是的	✔是的	✖否	(显示截图)
Zoho Mail网络邮件	小于0.5％	✔是的	✔是的	✖否	(显示截图)
Mozilla Thunderbird Windows 10	小于0.5％	✔是的	✖否	✔是的	(显示截图)
Spark macOS	小于0.5％	✔是的	✔是的	✔是的	(显示截图)
火花 iOS 13	小于0.5％	✔是的	✔是的	✔是的	(显示截图)
Spark Android 9	小于0.5％	✔是的	✔是的	✔是的	(显示截图)

* Popularity is shared across all platforms for the same email client because it cannot be reliably distinguished. Popularity source: Litmus, the 2019 email client market share.

*流行度在同一电子邮件客户端的所有平台上共享，因为无法可靠地区分流行度。 人气来源： Litmus，2019年电子邮件客户端市场份额 。

(Visit the original post to view my notes from the testing, and to see the latest tests as I gradually test more email clients and update the article there first.)

( 访问原始帖子以查看测试中的注释，并在我逐步测试更多电子邮件客户端并首先在此处更新文章时查看最新的测试。)

如何使HTML电子邮件成为黑暗模式友好 (How to make HTML emails dark mode friendly)

I already put the data to use, and a few Outlook related challenges later, I made our emails dark mode friendly. Here’s how you can do the same:

我已经使用了数据，后来又遇到了一些与Outlook相关的挑战，我使我们的电子邮件成为了暗模式。 您可以按照以下步骤进行操作：

What the data say:

数据怎么说：

1)调整色彩 (1) Adjusting colors)

Look out for Apple Mail, as it inverts colors only if the background color is transparent or unspecified — white background won’t do. The easiest way to make sure your emails won’t blind anybody is to check whether a background color is specified. For more control over the design, this is where prefers-color-scheme comes in handy.

请注意Apple Mail，因为只有在背景色是透明或未指定的情况下它才会反转颜色，而白色背景则不会 。 确保您的电子邮件不会使任何人盲目的最简单方法是检查是否指定了背景色。 为了更好地控制设计，这是“ prefers-color-scheme派上用场的地方。

Syntax (@media prefers-color-scheme):

语法(@media preferreds-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>

A design tip: Avoid pure white #fff as the text color. I found that contrast ratio around 11.5 for the main text is a nice compromise between not too bright and not too dim. Check the contrast ratio here: https://contrast-ratio.com or use Chrome dev tools.

设计提示：避免使用纯白色#fff作为文字颜色。 我发现主要文字的对比率大约为11.5，这是不太亮和不太暗之间的不错折衷。 在此处检查对比度： https ： //contrast-ratio.com或使用Chrome开发工具。

2)在明暗标志之间切换 (2) Switching between light and dark logo)

A dark text on a dark background is pretty much invisible, and that’s precisely what happens to a logo if viewed in an email client with enabled dark mode.

深色背景上的深色文本几乎是不可见的，而如果在启用了深色模式的电子邮件客户端中查看徽标，这正是徽标所发生的情况。

Nowadays, a typical logo usually has a transparent background, colorful icon, and dark copy. See the problem? Because email clients don’t invert image colors, you need to handle it yourself.

如今，典型的徽标通常具有透明的背景，彩色的图标和深色的副本。 看到问题了吗？ 因为电子邮件客户端不会反转图像颜色，所以您需要自己处理。

To tackle this, you can either:

为了解决这个问题，您可以：

1. save the logo with a white background instead of a transparent background (the easiest way to fix this). But I wouldn’t recommend this approach — dark mode users won’t be happy.
   将徽标保存为白色背景而不是透明背景(最简单的解决方法)。 但是我不推荐这种方法-暗模式用户不会满意。

2. put a light logo on a dark background, and keep the rest of the email on a white background (see how Litmus does it).

   在深色背景上放置浅色徽标，并将其余电子邮件保留在白色背景上( 请参阅Litmus如何做到 )。

3. make dark mode email your default. A good candidate for this would be Spotify as they only offer a dark theme in their apps.
   将深色模式设为默认电子邮件。 一个很好的选择就是Spotify，因为他们只在其应用程序中提供深色主题。

4. include both light and dark versions of your logo and switch between with prefers-color-scheme media query

   包括徽标的明暗版本，并在“ prefers-color-scheme媒体查询之间进行切换

My favorite is the last approach, so here’s how you do it:

我最喜欢的是最后一种方法，所以这是您的操作方法：

A simple "display: none" on the dark logo works just fine in all modern email clients. But to everyone's surprise, it doesn't work in Outlook and Windows 10 Mail.

黑色徽标上的简单"display: none"在所有现代电子邮件客户端中都可以正常使用。 但是令所有人惊讶的是，它在Outlook和Windows 10 Mail中不起作用。

In CSS styles:

在CSS样式中：

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

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

…and the HTML structure:

…以及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>

This approach works pretty well, but it still won’t work correctly across the board. The dark text on dark background issue will happen with email clients that do support dark mode but don't support prefers-color-scheme. That is Outlook, Windows 10 Mail, Zoho, and potentially Gmail.

这种方法效果很好，但是仍然无法正常使用。 确实支持暗模式但不支持prefers-color-scheme电子邮件客户端将发生暗背景问题。 这就是Outlook，Windows 10 Mail，Zoho和可能的Gmail。

So, to make the logo in email fully bulletproof, I’ll combine methods 1 and 4 from above. Method 1 will cover all email clients that support dark mode, but not the prefers-color-scheme. And method 4 will cover Apple Mail, Outlook on MacOS, and Outlook.com, which does support both.

因此，为使电子邮件中的徽标完全防弹，我将从上面结合方法1和4。 方法1将涵盖所有支持暗模式的电子邮件客户端，但不包括prefers-color-scheme 。 方法4将涵盖Apple Mail，MacOS上的Outlook和Outlook.com，后者均支持这两种方法。

Also, instead of saving the logo on a white background, I’ll add a 3-pixel wide background-matching border and save it on a transparent background as usual.

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

It’s starting look pretty complex (just for a logo), so let’s see the HTML markup first:

它开始看起来非常复杂(仅用于徽标)，因此让我们首先看一下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>

…and CSS styles:

…和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中的黑暗模式即将到来 (Dark mode in Gmail is coming)

Dark mode is coming to Android in the new Android 10, and Gmail should go completely dark too, finally. All you need is Android 10 and the newest Gmail (at least version 2019.09.01.268168002). However, Google tends to enable new features (a dark theme in this case) for users gradually with a server-side push, and I haven’t had luck with it for now.

在新的Android 10中，黑暗模式即将进入Android，Gmail最终也应该完全消失。 您需要的只是Android 10和最新的Gmail(最低版本为2019.09.01.268168002)。 但是，Google倾向于通过服务器端推送逐步为用户启用新功能(在这种情况下，这是一个黑暗的主题)，而我现在还没有运气。

I’m curious to see if support for @media prefers-color-scheme is coming to Gmail. From what I read, it doesn’t seem promising. I guess we have to wait to find out. I’ll update the article once I get the dark theme in Gmail enabled.

我很好奇，看看是否即将对Gmail支持@media prefers-color-scheme 。 从我的阅读来看，这似乎没有希望。 我想我们必须等待找出答案。 在启用Gmail中的深色主题后，我将更新文章。

结语 (Wrapping up)

Dark mode is coming to HTML email, and I love it! But, it’s another thing to worry about – like using HTML tables for layout wasn’t enough.

HTML电子邮件即将使用深色模式，我喜欢它！ 但是，还有另一件事要担心–例如使用HTML表进行布局还不够。

Stay up-to-date about the dark mode in email by joining our mailing list. We also share there insights and challenges we face while building and growing our SaaS product — Sidemail.

加入我们的邮件列表，了解有关电子邮件中暗模式的最新信息 。 我们还将分享在构建和发展SaaS产品( Sidemail)时面临的见识和挑战。

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/dark-mode-in-html-email-everything-you-need-to-know/

启用nat模式 路由模式