เปิดใช้ Dark Mode ใน HTML Emails: คู่มือครบถ้วนสำหรับ Email Clients สมัยใหม่

ด้วยอัปเดต iOS 13 Apple Mail ได้ dark theme หมายถึงเป็น email client หลักแรกที่รองรับ prefers-color-scheme CSS media query ตอนนี้จึงออกแบบอีเมลเฉพาะ dark และ light themes ได้

ผมแฟน dark mode มาก และอีเมลสว่างจัดมากคือ天敵 ตอนรู้ dark mode ใน iOS 13 ทำอย่างที่ควร: สั่ง iPhone ใหม่มาทดสอบ

ขณะนั้น ทดสอบ dark mode ในเกือบทุก email clients รวมถึง troublemaker Outlook นี่คือสิ่งที่พบ

แต่ก่อน prefers-color-scheme คืออะไร?
prefers-color-scheme CSS media query ใช้ตรวจจับว่าผู้ใช้ชอบ light หรือ dark theme ทำให้ออกแบบอีเมลเฉพาะทั้งสองได้

ด้วย iOS 13 update การรองรับใน email clients ยอดนิยมกระโดดจาก 2.3% เป็น 38.4% ขั้นตอนใหญ่ขอบคุณความนิยมของ Apple Mail น่าแปลกใจ Outlook เป็น email client เดียวที่รองรับก่อน Apple Mail

Dark Mode ทำงานอย่างไรใน Email Clients ยอดนิยม

เพื่อ render อีเมลให้มืด เอง email clients invert สีอีเมลอัตโนมัติเบื้องหลัง สำหรับ user-to-user emails ทำงานดีและสม่ำเสมอในทุก clients

แต่ไม่ได้ง่ายขนาดนั้นสำหรับ custom HTML emails — ที่เต็ม inbox ของเรา มันคือ transactional และ promotional emails

ความแตกต่างที่พบในการจัดการ dark mode email rendering:

* Popularity แบ่งปันทุก platform ของ email client เดียวกัน เพราะแยกไม่ได้อย่างน่าเชื่อถือ Popularity source: Litmus, the 2019 email client market share.

(เยี่ยมโพสต์ต้นฉบับดู notes จากการทดสอบ และ latest tests ที่อัปเดตที่นี่ก่อน)

วิธีทำ HTML ให้เป็น Dark Mode Friendly

นำข้อมูลไปใช้ และหลังจากช่วงท้าทาย Outlook ผมทำให้อีเมล dark mode friendly นี่คือวิธีทำ:

ข้อมูลบอกว่า:
มากกว่า 55% ของอีเมลอาจถูกเปิดด้วย dark mode enabled เมื่อ Gmail เข้ามาด้านมืด อีเมลที่อาจเปิดด้วย dark mode จะกระโดดเป็น 83%!

1) ปรับสี (Adjusting Colors)

ระวัง Apple Mail เพราะ invert สีเฉพาะถ้า background color เป็น transparent หรือไม่ระบุ — white background ไม่ได้ วิธีง่ายที่สุดให้แน่ใจอีเมลไม่สว่างตา คือเช็คว่า background color ถูกระบุหรือไม่ สำหรับควบคุมดีไซน์มากขึ้น prefers-color-scheme ช่วยได้

Syntax (@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>

เคล็ดลับดีไซน์: หลีกเลี่ยง pure white #fff เป็นสีข้อความ พบว่า contrast ratio ประมาณ 11.5 สำหรับข้อความหลักเป็นการ compromise ที่ดีระหว่างไม่สว่างเกินไปและไม่มืดเกินไป เช็ค contrast ratio ที่ https://contrast-ratio.com หรือ Chrome dev tools

2) สลับ Logo ระหว่าง Light และ Dark

ข้อความมืดบนพื้นหลังมืด ไม่อ่านออก และนั่นคือสิ่งที่เกิดกับ logo ถ้าดูใน email client ที่เปิด dark mode

ตอนนี้ logo ปกติมักมี transparent background, colorful icon, และ dark copy เห็นปัญหาไหม? เพราะ email clients ไม่ invert สีรูปภาพ ต้องจัดการเอง

วิธีแก้:

1. save logo ด้วย white background แทน transparent (วิธีง่ายสุด) แต่มิแนะนำ - dark mode users ไม่พอใจ
2. วาง light logo บน dark background และเก็บส่วนอื่นของอีเมลบน white background (ดู Litmus ทำอย่างไร)
3. ทำ dark mode email เป็น default ตัวเลือกดีคือ Spotify เพราะแอปของพวกเขาให้แค่ dark theme
4. รวม light และ dark versions ของ logo และสลับด้วย prefers-color-scheme media query

ตัวเลือกสุดท้ายเป็นโปรด นี่คือวิธีทำ:

"display: none" บน dark logo ทำงานได้ดีใน modern email clients ทั้งหมด แต่แปลกใจที่ไม่ทำงานใน Outlook และ Windows 10 Mail

ใน CSS styles:

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

…และ HTML structure:

<image src="dark-logo.png" class="darkLogo" />
<!-- ซ่อน light logo ให้สมบูรณ์ใน Outlook และ Windows 10 Mail ต้อง wrap light logo image tag ด้วย div -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
  <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

วิธีนี้ทำงานดี แต่ยังไม่ bulletproof ทุก client ปัญหาข้อความมืดบนพื้นหลังมืด จะเกิดกับ email clients ที่รองรับ dark mode แต่ไม่รองรับ prefers-color-scheme คือ Outlook, Windows 10 Mail, Zoho, และอาจเป็น Gmail

เพื่อทำให้ logo ในอีเมล bulletproof จริง ผมรวม method 1 และ 4 ข้างบน Method 1 ครอบทุก clients รองรับ dark mode แต่ไม่รองรับ prefers-color-scheme Method 4 ครอบ Apple Mail, Outlook on macOS, และ Outlook.com ที่รองรับทั้งคู่

แทนที่จะ save logo บน white background จะเพิ่ม border กว้าง 3 pixel สีตรง background และ save บน transparent background ตามปกติ

เริ่มดูซับซ้อน (แค่สำหรับ logo) มาดู HTML markup ก่อน:

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />
<!-- Light theme (so dark logo): สำหรับ 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): สำหรับ 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 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 ใน Gmail กำลังจะมา

Dark mode จะมาที่ Android ใน Android 10 ใหม่ และ Gmail ควรจะ dark mode เต็มรูปแบบ ต้องการ Android 10 และ Gmail ล่าสุด (อย่างน้อย version 2019.09.01.268168002) แต่ Google เปิดฟีเจอร์ใหม่ (dark theme) ให้ผู้ใช้ค่อยๆ ด้วย server-side push ผมยังไม่โชคได้ลอง

สงสัยว่า support สำหรับ @media prefers-color-scheme จะมาที่ Gmail ไหม จากที่อ่าน ไม่น่าจะมี 희망 ต้องรอดู อัปเดตบทความเมื่อได้ dark theme ใน Gmail enabled

สรุป

Dark mode กำลังมาถึง HTML email และผมชอบมัน! แต่เป็นอีกอย่างที่ต้องกังวล — เหมือนใช้ HTML tables สำหรับ layout ไม่พอ

อัปเดต dark mode ในอีเมลด้วยการสมัครรับ mailing list ของเรา เรายังแชร์ insights และ challenges ขณะสร้างและขยาย SaaS product — Sidemail

ขอบคุณที่อ่าน!