Bật Dark Mode trong HTML Emails: Hướng dẫn hoàn chỉnh cho Modern Clients

Với update iOS 13, Apple Mail có dark theme. Nghĩa là first major email client hỗ trợ CSS media query prefers-color-scheme. Bây giờ có thể design emails cho cả dark và light themes.

Tôi là fan cuồng dark mode, và email sáng chói là kẻ thù. Khi biết dark mode iOS 13, tôi làm điều hiển nhiên: order iPhone mới test.

Khi đó, cũng test dark mode hoạt động như thế nào trong hầu hết email clients, kể cả "troublemaker" Outlook. Đây là phát hiện.

Trước tiên, prefers-color-scheme là gì?
CSS media query prefers-color-scheme detect user prefer light hay dark theme, cho phép design email cho cả hai.

Với iOS 13 update, hỗ trợ trong popular email clients nhảy từ 2.3% lên 38.4%! Bước nhảy nhờ popularity Apple Mail. Ngạc nhiên, Outlook là client duy nhất hỗ trợ trước Apple Mail.

Dark mode hoạt động như thế nào trong popular email clients

Để render email message dark, email clients invert colors tự động behind the scenes. Cho regular user-to-user emails, works well và consistently tất cả clients.

Tuy nhiên, không simple cho custom HTML emails — những email lấp đầy inbox. Tôi nói transactional và promotional.

Sự khác biệt tôi tìm thấy cách email clients handle dark mode email rendering:

* Popularity shared across all platforms cho same email client vì không distinguish reliably. Nguồn popularity: Litmus, 2019 email client market share.

(Ghé bài gốc xem notes từ testing, và latest tests khi tôi gradually test thêm clients và update bài đó first.)

Làm HTML emails dark mode friendly

Tôi đã áp dụng data, sau vài challenges liên quan Outlook, làm emails dark mode friendly. Cách bạn làm tương tự:

Data nói gì:
Hơn 55% emails có thể mở với dark mode enabled. Khi Gmail join dark side, emails có thể mở với dark mode sẽ vọt lên 83%!

1) Điều chỉnh màu sắc (Adjusting colors)

Chú ý Apple Mail, vì nó invert colors chỉ nếu background color transparent hoặc unspecified — white background KHÔNG hoạt động. Cách dễ nhất đảm bảo emails không làm mù ai là check xem background color có specified không. Cho more control over design, đây là lúc prefers-color-scheme hữu ích.

Cú pháp (@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> 

Design tip: Tránh pure white #fff làm text color. Tôi thấy contrast ratio ~11.5 cho main text là compromise tốt giữa không quá sáng và không quá dim. Check contrast ratio: https://contrast-ratio.com hoặc Chrome dev tools.

2) Chuyển đổi giữa light và dark logo

Dark text trên dark background gần như invisible, chính xác điều xảy ra với logo nếu view trong email client bật dark mode.

Ngày nay, typical logo thường có transparent background, colorful icon, dark copy. Vấn đề? Vì email clients không invert image colors, bạn phải tự handle.

Để tackle, bạn có thể:

1. Lưu logo với white background thay vì transparent (cách dễ nhất fix). Nhưng không recommend — dark mode users không hạnh phúc.
2. Đặt light logo trên dark background, giữ phần còn lại email trên white background (xem Litmus làm như thế nào).
3. Làm dark mode email mặc định. Ứng cử viên tốt: Spotify vì chỉ offer dark theme trong apps.
4. Include cả light và dark versions logo, switch giữa chúng với prefers-color-scheme media query

Cách tôi thích nhất là cuối, đây là cách làm:

Một "display: none" đơn giản trên dark logo works fine trong all modern email clients. Nhưng surprise, không work trong Outlook và Windows 10 Mail.

Trong CSS styles:

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

…và HTML structure:

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

Cách này works pretty well, nhưng vẫn không correct across the board. Dark text trên dark background issue xảy ra với email clients support dark mode nhưng KHÔNG support prefers-color-scheme. Đó là Outlook, Windows 10 Mail, Zoho, và có thể Gmail.

Vì vậy, để làm logo trong email fully bulletproof, tôi combine methods 1 và 4. Method 1 cover all email clients support dark mode nhưng không prefers-color-scheme. Method 4 cover Apple Mail, Outlook macOS, Outlook.com, support cả hai.

Thay vì lưu logo trên white background, tôi thêm 3-pixel wide background-matching border và lưu trên transparent background như bình thường.

Bắt đầu trông complex (chỉ cho logo), xem HTML markup trước:

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

…và CSS styles:

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

Dark mode trong Gmail sắp đến

Dark mode đến Android trong Android 10 mới, Gmail cũng nên đi completely dark. Cần Android 10 và Gmail mới nhất (ít nhất version 2019.09.01.268168002). Tuy nhiên, Google tend enable new features (dark theme) gradually với server-side push, tôi chưa may mắn.

Tôi tò mò xem support @media prefers-color-scheme có đến Gmail không. Từ đọc, không promising. Đoán phải chờ. Sẽ update bài khi dark theme Gmail enabled.

Tóm lại

Dark mode đến HTML email, và tôi love it! Nhưng, lại một thứ lo lắng – như dùng HTML tables cho layout chưa đủ.

Cập nhật dark mode trong email bằng cách join mailing list. Chúng tôi cũng share insights và challenges building/growing SaaS product — Sidemail.

Cảm ơn đã đọc!