สุดยอดคู่มือสำหรับโหมดมืดสำหรับนักการตลาดอีเมล

เผยแพร่แล้ว: 2021-10-29

โหมดมืด อุตสาหกรรมเทคโนโลยีเต็มไปด้วยคำสองคำนี้ และการตลาดผ่านอีเมลก็ไม่มีข้อยกเว้น ในปี 2018 Apple ได้เพิ่ม Dark Mode ให้กับไคลเอนต์อีเมลบนเดสก์ท็อป ในปีถัดมา Dark Mode ได้เข้ามาสู่ iOS Mail และบริษัทยักษ์ใหญ่ในอุตสาหกรรมอื่นๆ รวมถึง Gmail ได้ประกาศรองรับ Dark Mode ปฏิเสธไม่ได้ว่าโหมดมืดกำลังเข้าครอบงำกล่องจดหมาย—และการทำให้แน่ใจว่าอีเมลจะดูดีในสภาพแวดล้อมการอ่านนี้เป็นความท้าทายครั้งใหม่สำหรับนักการตลาดผ่านอีเมล

โหมดมืดเข้ามาแทนที่กล่องจดหมาย และทำให้แน่ใจว่าอีเมลจะดูดีในสภาพแวดล้อมการอ่านนี้เป็นความท้าทายครั้งสำคัญครั้งใหม่สำหรับนักการตลาดผ่านอีเมล ทวีตสิ่งนี้ →

ในโพสต์นี้ เราแยกย่อย:

Dark Mode คืออะไรและทำไมคนถึงใช้
3 วิธีการตั้งค่าโหมดมืดส่งผลต่อการออกแบบอีเมล
วิธีการกำหนดเป้าหมายโหมดมืดที่แตกต่างกัน
รองรับไคลเอนต์อีเมลสำหรับ Dark Mode
วิธีออกแบบและเขียนโค้ดสำหรับ Dark Mode

พร้อมที่จะดำน้ำใน? มาสรุปพื้นฐานกันก่อน

โหมดมืดคืออะไร? จานสีที่เข้มกว่าสำหรับสภาพแวดล้อมที่มีแสงน้อยหรือตอนกลางคืน

โหมดมืดเป็นชุดสีแบบกลับด้านที่ใช้ตัวอักษรสีอ่อน องค์ประกอบ UI และรูปสัญลักษณ์บนพื้นหลังสีเข้ม และเป็นหนึ่งในเทรนด์การออกแบบดิจิทัลที่ร้อนแรงที่สุดในช่วงไม่กี่ปีที่ผ่านมา ตั้งแต่ระบบปฏิบัติการของ Apple ไปจนถึงแอพอย่าง Twitter, Slack หรือ Facebook Messenger ระบบปฏิบัติการและแอพยอดนิยมส่วนใหญ่ตอนนี้อนุญาตให้ผู้ใช้เปลี่ยนไปใช้โหมดมืดได้

โหมดมืดเป็นประเด็นร้อน—และด้วยเหตุผลที่ดี หลายคนชอบโหมดมืดเพราะ:

สบาย ตา . ข้อความสีอ่อนบนพื้นหลังสีเข้มจะดีกว่ามากในการลดอาการปวดตา โดยเฉพาะอย่างยิ่งในสถานการณ์ที่มีแสงน้อย
มัน ลดความสว่างของหน้าจอ ประหยัดแบตเตอรี่ของคุณ
สามารถ ปรับปรุงความชัดเจนของเนื้อหา และช่วยให้ผู้ใช้บางคนใช้เนื้อหาบนเดสก์ท็อปและอุปกรณ์เคลื่อนที่ได้ง่ายขึ้น
พวกเขาอาจมีการ ตั้งค่าอินเทอร์เฟซที่เข้มกว่า

ด้วยความนิยมของโหมดมืดที่เพิ่มขึ้น จึงไม่น่าแปลกใจที่ระบบจะเข้ามาในกล่องจดหมายด้วยเช่นกัน

คู่มือฟรี

เรียนรู้เพิ่มเติมเกี่ยวกับโหมดเข้ม กรอกแบบฟอร์มเพื่อดาวน์โหลดทันที

ลูกค้าใช้ Dark Mode กับอีเมลของฉันอย่างไร

ในขณะนี้ ดูเหมือนว่าจะมีรูปแบบสีที่แตกต่างกัน สาม ประเภทโดยพื้นฐานที่ไคลเอนต์อีเมลใช้เพื่อปรับใช้โหมดมืดกับอีเมล ลองดูทีละรายการ (หรือข้ามไปที่แผนภูมิการสนับสนุนไคลเอนต์อีเมลโหมดมืดโดยตรง)

ไม่เปลี่ยนสี

ใช่คุณอ่านถูกต้อง ลูกค้าบางส่วนที่อีเมลให้คุณเปลี่ยน UI ของพวกเขาไปยังโหมดมืด แต่ไม่ได้มีผลกระทบใด ๆ ในการอีเมล HTML ของคุณมีการแสดง ไม่ว่าแอปจะตั้งค่าเป็นโหมดสว่างหรือโหมดมืด อีเมลของคุณจะมีลักษณะเหมือนกันทุกประการ ไคลเอนต์อีเมลบางตัวจะแสดงการออกแบบโหมดแสงของคุณโดยค่าเริ่มต้นเสมอ (เว้นแต่คุณจะเพิ่มโค้ดเพื่อเรียกใช้โหมดมืดโดยเฉพาะ ซึ่งฉันจะพูดถึงในภายหลัง) นี่คือรายชื่อลูกค้าเหล่านั้น:

แอปเปิ้ลเมล
iPhone
iPad
Hey.com

ดูตัวอย่างอีเมลนี้ใน Apple Mail: การออกแบบอีเมลยังคงเหมือนเดิม ไม่ว่าคุณจะดูอีเมลใน UI ของไคลเอ็นต์อีเมลที่มืดหรือสว่าง:

มีข้อยกเว้นบางประการ: อย่างแรก อีเมลข้อความธรรมดา จะ เรียกใช้แอปพลิเคชันของธีมโหมดมืด และโค้ดขั้นต่ำที่บล็อกโหมดมืดไม่ให้นำไปใช้กับอีเมลข้อความธรรมดาคือรูปภาพขนาด 2×1 เพื่อให้แน่ใจว่าคุณ สามารถรวมพิกเซลการติดตาม 1×1 ในขณะที่ยังคงความรู้สึก "ข้อความธรรมดา"

ประการที่สอง หากคุณปล่อยแท็กโหมดมืด <meta> ในเทมเพลตของคุณโดยไม่ได้ตั้งใจ Apple Mail / iPhone / iPad จะ แปลงอินสแตนซ์ของ #ffffff สีขาวล้วนเป็นสีเทาเข้มโดยอัตโนมัติ เว้นแต่คุณจะแทนที่ด้วยสไตล์โหมดมืดที่คุณกำหนดเอง หรือคุณสามารถใช้สีขาวนวล เช่น #fffffe แทนได้

ตัวเลือกโหมดมืด: ค่าเริ่มต้นเทียบกับกำหนดเอง

มีโปรแกรมรับส่งเมลไม่กี่ตัวที่จะบังคับโหมดมืดตามค่าเริ่มต้นในอีเมลของคุณโดยอัตโนมัติ ถ้าคุณไม่ทำอะไรเลย แต่ถ้าคุณชอบพวกเราส่วนใหญ่และคุณไม่ใช่แฟนของสไตล์เริ่มต้นเหล่านี้ คุณอาจต้องการใช้ตัวเลือกที่สาม: ออกแบบและเขียนโค้ดธีมโหมดมืดของคุณเอง ด้านล่างนี้ คุณสามารถดูอีเมลแบบเคียงข้างกันซึ่งมีธีมโหมดแสงและธีมโหมดมืดที่กำหนดเองได้

อีเมลโหมดแสงลิตมัสเทียบกับตัวอย่างอีเมลโหมดมืดที่กำหนดเอง

ก่อนที่เราจะดูวิธีเข้าถึงธีม Dark Mode แบบกำหนดเอง ลองมาดูกันว่าไคลเอนต์อีเมลอื่นๆ จัดการกับโหมดมืดเริ่มต้นอย่างไร

โหมดมืดเริ่มต้น: สลับสีบางส่วน

ชุดรูปแบบ Dark Mode แรกคือสิ่งที่ฉันชอบเรียกว่า "Partial Color Invert" โดยจะตรวจจับเฉพาะพื้นที่ที่มีพื้นหลังสีอ่อนและกลับด้านเพื่อให้พื้นหลังสีอ่อนมีสีเข้ม ในขณะที่ข้อความสีเข้มจะกลายเป็นสีอ่อน

โดยทั่วไปจะทิ้งพื้นที่ที่มีพื้นหลังสีเข้มเพียงอย่างเดียว ส่งผลให้มีการออกแบบโหมดมืดทั้งหมด โชคดีที่ไคลเอนต์อีเมลส่วนใหญ่ที่ใช้วิธี นี้ยัง รองรับการกำหนดเป้าหมายในโหมดมืด ดังนั้นคุณจึงสามารถแทนที่ธีมสีเข้มที่เป็นค่าเริ่มต้นของไคลเอ็นต์ได้

Outlook.com เป็นโปรแกรมรับส่งเมลที่จะเปลี่ยนสีบางส่วน ดังที่คุณเห็นในภาพหน้าจอนี้:

การเปรียบเทียบอีเมลแบบเคียงข้างกัน

โหมดมืดเริ่มต้น: กลับสีเต็มรูปแบบ

Full Color Invert เป็นชุดสีที่มีการบุกรุกมากที่สุด: ไม่เพียงแต่จะสลับพื้นที่ที่มีพื้นหลังสีอ่อนเท่านั้น แต่ยังส่งผลต่อพื้นหลังสีเข้มด้วย

ดังนั้น หากคุณออกแบบอีเมลให้มีธีมสีเข้มแล้ว โครงการนี้จะบังคับให้ อีเมล เหล่านั้นกลายเป็นสีสว่างอย่างแดกดัน น่าเสียดายที่ขณะนี้เป็นกลวิธีที่ใช้โดยไคลเอนต์อีเมลยอดนิยมบางตัว เช่น แอป Gmail (iOS) และ Outlook 2019 (Windows)

ในตัวอย่างด้านล่าง คุณจะเห็นว่าพื้นหลังสีอ่อนถูกแปลงเป็นเวอร์ชันสีเข้มของสีดั้งเดิม และ พื้นที่ซึ่งก่อนหน้านี้มีพื้นหลังสีเข้มพร้อมข้อความสีอ่อน ตอนนี้เปลี่ยนเป็นสีอ่อนพร้อมข้อความสีเข้ม

ตัวอย่างอีเมลเคียงข้างกัน

รูปแบบการสลับสีแบบเต็มนี้ไม่เพียงแต่จะเปลี่ยนอีเมลของคุณอย่างร้ายแรงที่สุด แต่โปรแกรมรับส่งเมลที่ใช้ตรรกะ นี้ยังไม่อนุญาตให้กำหนดเป้าหมายโหมดมืดในขณะ นี้

โปรแกรมรับส่งเมลยังคงหาวิธีใช้งานโหมดมืดได้ดีที่สุดและอาจเปิดรับคำติชมจากผู้ใช้ โดยเฉพาะอย่างยิ่งเนื่องจากการไม่อนุญาตให้นักพัฒนากำหนดเป้าหมายโหมดมืดด้วยสไตล์ของตนเอง อาจส่งผลเสียต่อความชัดเจนและการเข้าถึงได้

เพื่อประโยชน์ในการสนับสนุนการกำหนดเป้าหมายโหมดมืดที่ดีขึ้นและตรรกะของชุดรูปแบบ Dark Mode ที่มีการบุกรุกน้อยลง คุณสามารถสื่อสารความคิดของคุณโดยตรงไปยังทีมการช่วยเหลือพิเศษของ Gmail และคุณยังสามารถร่วมส่งภาพหน้าจอของโหมดมืดของ Gmail ที่ทำลายอีเมลของคุณ

ฉันจะกำหนดเป้าหมายผู้ใช้ Dark Mode ด้วยสไตล์ของตัวเองได้อย่างไร

ดังที่กล่าวไว้ข้างต้น วิธีที่ไคลเอนต์อีเมลในโหมดมืดจัดการกับอีเมล HTML ปกติของคุณจะแตกต่างกันไป แต่ถ้าคุณต้องการใช้สไตล์โหมดมืดของคุณเองที่อาจแตกต่างจากรูปแบบสีเริ่มต้นของโปรแกรมรับส่งเมล คุณสามารถใช้ได้สองวิธี

@media (ชอบ-โทนสี: มืด)

วิธีนี้ทำงานในลักษณะเดียวกับการใช้บล็อกของสไตล์ใน คิวรี @media สำหรับมุมมอง Mobile Responsive ของคุณ ยกเว้นบล็อก CSS กำหนดเป้าหมายอินเทอร์เฟซผู้ใช้ใดๆ ที่ตั้งค่าเป็นโหมดมืด @media (prefers-color-scheme: dark) ให้คุณสร้างธีม Dark Mode แบบกำหนดเองที่ทนทานที่สุด ซึ่งคุณสามารถใช้อะไรก็ได้ตั้งแต่การสลับรูปภาพเฉพาะ Dark Mode เอฟเฟกต์โฮเวอร์ ภาพพื้นหลัง... โดยพื้นฐานแล้วเกือบทุกอย่างที่คุณสามารถทำได้ด้วย CSS แบบดั้งเดิม !

[data-ogsc]

นี่เป็นวิธีการแรกที่ Mark Robbins ให้ความสนใจในการกำหนดเป้าหมายแอป Outlook แม้ว่าจะดูเหมือนเป็นส่วนแบ่งการตลาดที่ค่อนข้างแคบ แต่ก็ค่อนข้างง่ายที่จะทำซ้ำสไตล์ @media (prefers-color-scheme: dark) ที่ คุณใช้ไปแล้ว และเพิ่มคำนำหน้า [data-ogsc] ที่เหมาะสม ให้กับกฎ CSS แต่ละกฎ

ไคลเอนต์อีเมลใดรองรับโหมดมืด

ไคลเอ็นต์และแอปเหล่านี้ในปัจจุบันมีโหมดมืด—ไม่ว่าจะเป็นการตั้งค่าที่ผู้ใช้สามารถตั้งค่าด้วยตนเองหรือโดยการตรวจจับแบบแผนชุดสีที่ผู้ใช้ต้องการโดยอัตโนมัติ:

แอพมือถือ

จดหมาย iPhone
เมล iPad
แอป Gmail (แอนดรอยด์)
แอป Gmail (iOS)
แอป Outlook (แอนดรอยด์)
แอป Outlook (iOS)

ไคลเอนต์เดสก์ท็อป

แอปเปิ้ลเมล
Outlook 2019 (Mac OS)
Outlook 2019 (วินโดวส์)

ลูกค้าเว็บ

Outlook.com
Hey.com

แต่เพียงเพราะว่าไคลเอนต์อีเมลเหล่านี้มีวิธีตั้งค่า UI เป็นโทนสีเข้ม ไม่ได้หมายความว่าพวกเขาจัดการอีเมลของคุณในแบบเดียวกัน การแสดงผลอีเมลมีความซับซ้อน อีเมลที่ดูดีในไคลเอนต์หนึ่งอาจดูเสียหายในไคลเอนต์อื่น ตอนนี้ Dark Mode กำลังเพิ่มความซับซ้อนอีกชั้นหนึ่ง ดังที่เราได้แสดงให้เห็นแล้ว มีหลายวิธีที่ไคลเอนต์อีเมลโหมดมืดอาจจัดการกับรหัสของคุณ

และไม่มีการสนับสนุนที่สอดคล้องกันสำหรับวิธีการกำหนดเป้าหมายที่แตกต่างกันเช่นกัน ดังนั้นไคลเอนต์อีเมลใดที่เป็นไปตามรูปแบบสีโดยค่าเริ่มต้น ในขณะที่บางอีเมลข้อเสนอพิเศษออกแบบโอกาสที่จะกำหนดเป้าหมายโหมดเข้มเพื่อเพิ่มประสิทธิภาพประสบการณ์การอ่านลูกค้าส่วนใหญ่สามารถกำหนดเป้าหมายที่มีทั้งสื่อ @ (ที่ชอบสี-โครงการ: เข้ม) หรือ [ข้อมูล ogsc] วิธี

เราได้ทดสอบการตั้งค่าโหมดมืดในโปรแกรมรับส่งเมลต่อไปนี้ เพื่อดูว่าการตั้งค่าดังกล่าวส่งผลต่ออีเมลปกติที่ไม่มีการกำหนดเป้าหมายเฉพาะสำหรับ Dark Mode รวมถึงการรองรับการกำหนดเป้าหมาย Dark Mode อย่างไร นี่คือสิ่งที่เราพบ ...

แผนภูมิรองรับไคลเอนต์อีเมลโหมดมืด (ณ เดือนตุลาคม 2021)

ไคลเอนต์อีเมล	การรักษา HTML ในโหมดมืด	@media	[data-ogsc]	นิสัยใจคอ
แอปเปิ้ลเมล (MacOS)	ไม่มีการเปลี่ยนแปลง*	✓ ใช่	✘ ไม่	* BG สีขาวบริสุทธิ์ (#ffffff) จะถูกกลับด้านหากมี <meta> อยู่
iPhone / iPad (iOS 13)	ไม่มีการเปลี่ยนแปลง*	✓ ใช่	✘ ไม่	* BG สีขาวบริสุทธิ์ (#ffffff) จะถูกกลับด้านหากมี <meta> อยู่
Hey.com	ไม่มีการเปลี่ยนแปลง	✓ ใช่	✘ ไม่
Outlook.com	กลับด้านบางส่วน	? บางส่วน*	? บางส่วน**	บางสี BG จะเข้มขึ้น *การสลับรูปภาพได้ผล!
Outlook 2019 (MacOS)	กลับด้านบางส่วน	? บางส่วน*	✘ ไม่	*บางสี BG จะเข้มขึ้น
Outlook 2019 (WinOS)	กลับด้านเต็ม*	✘ ไม่	✘ ไม่	*การกำหนดเป้าหมายพิเศษเป็นไปได้!
แอป Outlook (iOS)	กลับด้านบางส่วน	? บางส่วน*	✘ ไม่	*บางสี BG จะเข้มขึ้น
แอป Outlook (แอนดรอยด์)	กลับด้านบางส่วน	✘ ไม่	? บางส่วน*	*บางสี BG จะเข้มขึ้น
แอป Gmail (iOS)	กลับด้านเต็ม*	✘ ไม่	✘ ไม่	*การกำหนดเป้าหมายพิเศษเป็นไปได้!
แอป Gmail (แอนดรอยด์)	กลับด้านบางส่วน	✘ ไม่	✘ ไม่

Gmail iOS & Outlook การกำหนดเป้าหมายเฉพาะ Windows

เนื่องจากตอนแรกฉันเขียนคู่มือนี้ #EmailGeeks ที่ฉันโปรดปรานบางตัวได้พัฒนาวิธีแก้ไขปัญหาชั่วคราวที่ยอดเยี่ยมเพื่อควบคุม ธีมเริ่มต้นแบบ Invert ทั้งหมดที่ เราต่อสู้ด้วย วิธีแก้ปัญหาแต่ละข้อเหล่านี้ละเอียดมาก พวกเขารับประกันคำแนะนำของตัวเอง ดังนั้นอย่าลืมตรวจสอบคำอธิบายแบบเต็ม!

Remi Parmentier นำเสนอบทช่วยสอนเกี่ยวกับ "การแก้ไขปัญหาโหมดมืดของ Gmail ด้วย CSS Blend Modes" โดยการ mix-blend-mode และการแฮ็ก Gmail จาก HowToTarget.email เพื่อรักษาพื้นหลังและสีข้อความดั้งเดิมของคุณสำหรับแอป Gmail บน iOS

Nicole Merlin ใช้อีเมลวิซาร์ดใน "วิธีแก้ปัญหาโหมดมืดของ Outlook" โดยสร้างสองวิธีในการกำหนดเป้าหมาย Outlook สำหรับโหมดมืดของ Windows ด้วยคุณสมบัติ CSS แบบไล่ระดับสีเฉพาะ MSO และเคล็ดลับ VML (Vector Markup Language) ที่ประณีตมาก

อย่างไรก็ตาม คำเตือน เมื่อเจาะลึกถึงการแฮ็กเหล่านี้ เนื่องจากวิธีการทั้งสองนี้มีจุดประสงค์เพื่อบังคับให้โปรแกรมรับส่งเมลแสดงข้อความและ/หรือสีพื้นหลังของโหมดแสงดั้งเดิมเมื่อนำไปใช้ คุณจึงเสี่ยงต่อการไม่เคารพผู้ใช้ของคุณ การตั้งค่าสำหรับโหมดมืดที่ขัดต่อจิตวิญญาณของการเข้าถึง อย่าลืมใช้สิ่งเหล่านี้เท่าที่จำเป็น เช่น การปรับปรุงอัตราส่วนคอนทราสต์เมื่อพื้นหลังหรือข้อความแปลงเป็นโหมดมืดในลักษณะที่อ่านไม่ได้

แม้ว่าวิธีการกำหนดเป้าหมายเหล่านี้จะค่อนข้างจำกัดเมื่อเปรียบเทียบกับวิธีการ @media (ชอบ -color -scheme: dark) หรือ [data-ogsc] ที่คุณสามารถทำได้ แต่ก็ยังเป็นเครื่องมือที่มีประโยชน์ในกรณีที่คุณจำเป็นต้องแก้ไขปัญหา ด้วยโหมดมืดที่ทำลายความชัดเจนของข้อความของคุณ

วิธีออกแบบและเขียนโค้ดอีเมล Dark Mode

เมื่อกำหนดเป้าหมายรูปแบบ Dark Mode ในไคลเอนต์อีเมล อย่าลืมปฏิบัติตามหกขั้นตอนเหล่านี้เพื่อปรับปรุงประสบการณ์ Dark Mode สำหรับสมาชิกของคุณ

1. ปรับโลโก้และรูปภาพอื่นๆ ของคุณให้เหมาะสมสำหรับทุกสไตล์

เพิ่มโครงร่างโปร่งแสงให้กับ PNG แบบโปร่งใสพร้อมข้อความสีเข้มเพื่อให้อ่านง่ายในโปรแกรมรับส่งเมลที่การปรับแต่งโหมดมืดมีข้อจำกัดมากขึ้น เช่น แอป Gmail และ Outlook 2019 (Windows)

ซึ่งจะช่วยป้องกันปัญหาใดๆ ที่โปรแกรมรับส่งเมลอาจตัดสินใจใช้การตั้งค่าสลับสีบางส่วนหรือสลับสีเต็ม และทำให้ผู้ติดตามของคุณมองเห็นได้ง่ายขึ้น การเลือกใช้พื้นหลังแบบโปร่งใสทุกครั้งที่ทำได้จะช่วยได้

01-logos

คุณยังสามารถสนุกกับโลโก้ที่ปรับให้เหมาะกับโหมดมืดได้อีกด้วย!

ด้านล่างนี้คือตัวอย่างโลโก้ปลอมที่ฉันสร้างขึ้น โดยที่ฉันไม่เพียงแต่เพิ่มเงาแสงด้านหลังข้อความเพื่อให้โดดเด่นกว่าพื้นหลังสีเข้มเท่านั้น แต่ฉันยังใส่พื้นผิวที่มีดวงดาวอยู่ด้านหลังเพื่อให้เหมาะกับธีมกาแล็กซี "NebulaCo"

องค์ประกอบโปร่งแสงใดๆ ที่คุณสร้างลงในโลโก้ของคุณจะไม่ปรากฏให้เห็นในโหมดแสง ทำหน้าที่เป็นกลยุทธ์การออกแบบเชิงป้องกัน และ มอบโอกาสในการเพิ่มสัมผัสตราสินค้าพิเศษที่สามารถมองเห็นได้ในโหมดมืดเท่านั้น

หากรูปภาพของคุณ ไม่ โปร่งใสและมีพื้นหลัง ให้ตรวจสอบว่ามีช่องว่างภายในบริเวณจุดโฟกัสเพียงพอเพื่อหลีกเลี่ยงการเรียงตัวกันที่ดูอึดอัด

03-ช่องว่าง

นอกจากนี้ ให้สลับภาพโหมดแสงและโหมดมืดด้วย @media (ชอบ-ชุดสี: มืด) และ [data-ogsc] ที่ อธิบายไว้ด้านล่างในคู่มือนี้

2. เปิดใช้งานโหมดมืดในตัวแทนผู้ใช้ไคลเอนต์อีเมล

เมื่อรวม ข้อมูลเมตา นี้ในแท็ก <head> ของคุณ คุณสามารถมั่นใจได้ว่าโหมดมืดถูกเปิดใช้งานในอีเมลของคุณสำหรับสมาชิกที่เปิดใช้งานโหมดมืด:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

3. เพิ่มรูปแบบ Dark Mode สำหรับ @media (ชอบ-color-scheme: dark)

เพิ่มคิวรีสื่อนี้ในส่วน <style></style> ที่ ฝังตัวของคุณสำหรับสไตล์โหมดมืดแบบกำหนดเองใน iOS, Apple Mail, Outlook.com, Outlook 2019 (MacOS) และแอป Outlook (iOS)

คลาส .dark-img และ . light-img มีประโยชน์อย่างยิ่งในการแสดงโลโก้เฉพาะโหมดมืดหากมีโลโก้ที่โครงร่างไม่เหมาะ

ตัวอย่าง CSS :

@media (prefers-color-scheme: dark ) {
  /* Shows Dark Mode-Only Content, Like Images */
  .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
  
  /* Hides Light Mode-Only Content, Like Images */
  .light-img { display:none; display:none !important; }
  
  /* Custom Dark Mode Background Color */
  .darkmode { background-color: #272623 !important; }
  
  /* Custom Dark Mode Font Colors */
  h1, h2, p, span, a, b { color: #ffffff !important; }
  
  /* Custom Dark Mode Text Link Color */
  .link { color: #91ADD4 !important; }
}

4. ทำซ้ำรูปแบบ Dark Mode ด้วย [data-ogsc] นำหน้า

เพิ่มสไตล์นี้เพื่อรับการสนับสนุนในแอป Outlook (Android)

ตัวอย่าง CSS :

/* Shows Dark Mode-Only Content, Like Images */
[data-ogsc] .dark-img { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

/* Hides Light Mode-Only Content, Like Images */
[data-ogsc] .light-img { display:none; display:none !important; }

/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode { background-color: #272623 !important; }

/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h2, [data-ogsc] p, [data-ogsc] span, [data-ogsc] a, [data-ogsc] b { color: #ffffff !important; }

/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #91ADD4 !important; }

5. ใช้สไตล์เฉพาะโหมดมืดกับร่างกายของคุณ HTML

ตรวจสอบให้แน่ใจว่าแท็ก HTML ทั้งหมดของคุณมีการแทรกคลาส Dark Mode ที่เหมาะสม นี่คือตัวอย่างของ คลาส .dark-img และ . light-img ที่ปรากฏในโลโก้โหมดแสงกับโลโก้โหมดมืด

ตัวอย่าง HTML :

<!-- start HEADER_LOGO -->
<a href="http://litmus.com/" target="_blank">

    <img class="light-img" src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-black.png" width="163" height="60" alt="Litmus" style="color: #33373E; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />

    <!-- The following Dark Mode logo image is hidden 
    with MSO conditional code and inline CSS, but will be         
    revealed once Dark Mode is triggered -->

    <!--[if !mso]><! --><div class="dark-img" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center">
          <img src="https://campaigns.litmus.com/_email/_global/images/logo_icon-name-white.png" width="163" height="60" alt="Litmus" style="color: #ffffff; font-family:'proxima_nova', Helvetica, Arial, sans-serif; text-align:center; font-weight:bold; font-size:36px; line-height:40px; text-decoration: none; margin: 0 auto; padding: 0;" border="0" />
    </div><!--<![endif]-->

</a>
<!-- end HEADER_LOGO -->

6. ABT: ทำการทดสอบเสมอ!

อย่างที่เราพูดถึงเสมอว่าไคลเอนต์อีเมลมีการเปลี่ยนแปลงอยู่ตลอดเวลา โดยเฉพาะอย่างยิ่งคุณสมบัติใหม่อย่าง Dark Mode การปรับแต่งตรรกะการเรนเดอร์กำลังมาอย่างรวดเร็วและบ่อยครั้ง วิธีเดียวที่จะควบคุมทุกอย่างได้คือการทดสอบอีเมลทุกฉบับด้วยเครื่องมืออย่าง Litmus

QA ทดสอบอีเมล Dark Mode ของคุณ

คุณทำมันถูกต้องหรือไม่? ค้นหาด้วยการทดลองใช้สารสีน้ำเงินฟรี ดูตัวอย่างลักษณะอีเมลของคุณในไคลเอนต์อีเมล แอพ และอุปกรณ์กว่า 100 รายการ และตรวจสอบให้แน่ใจว่าอีเมลของคุณอยู่ในตราสินค้าและปราศจากข้อผิดพลาดทุกครั้ง

เริ่มทดลองใช้ฟรี

เคารพการตั้งค่าของผู้ใช้เมื่อพูดถึงโหมดมืด

ประโยชน์ที่ใหญ่ที่สุดอย่างหนึ่งของโหมดมืดคือการช่วยลดอาการปวดตาสำหรับผู้ที่อยู่ในสภาวะแสงน้อยหรือด้วยเหตุผลส่วนตัวอื่นๆ แต่มันไม่ใช่เรื่องของ Dark Mode กับ Light Mode อยู่ที่ว่า ผู้ติดตามของคุณต้องการอะไร ไม่ว่าจะเป็นประสบการณ์ที่มืดหรือสว่าง ไม่มีคำตอบที่ถูกหรือผิด

ดังนั้น หากสมาชิกของคุณกำลังตัดสินใจอย่างมีสติในการดูอีเมลในโหมดมืด คุณควรเคารพในสิ่งนั้น เช่นเดียวกับที่คุณต้องการเพิ่มข้อความ ALT ในกรณีที่สมาชิกของคุณต้องการปิดรูปภาพตามค่าเริ่มต้น คุณควรสร้างอีเมลที่คำนึงถึงอินเทอร์เฟซที่มืดกว่าด้วย

เผยแพร่ครั้งแรกเมื่อวันที่ 20 พฤศจิกายน 2019 โดย Alice Li ปรับปรุงล่าสุด 28 ตุลาคม 2021