วิธีป้องกัน iOS 13 Dark Mode จากการทำลายอีเมล

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

ในที่สุดหลังจากได้รับภาพหน้าจอเราได้เรียนรู้ว่าปัญหาเกิดขึ้นบน iPhone โดยใช้โหมดมืด จนถึงตอนนี้พวกเขาทั้งหมดเป็นลูกค้าที่ใช้ gmail กับแอป Mail หรือกับ Safari (ทั้งคู่มีปัญหาเดียวกัน) ฉันไม่แน่ใจว่าปัจจัย gmail นั้นเกี่ยวข้องหรือบังเอิญ

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

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

ฉันควรทราบว่าเรายังมีรหัส QR ฝังอยู่ในอีเมลด้วยดังนั้นฉันจึงกังวลเกี่ยวกับโซลูชันที่จะช่วยให้โหมดมืดดำเนินการในการเปลี่ยนสีอีเมลเต็มรูปแบบของเราเนื่องจากฉันเชื่อว่ามันจะทำให้จดจำรหัส QR ได้ยากขึ้น .

แก้ไข: สิ่งนี้ไม่เกี่ยวข้องกับรหัสแอพใด ๆ ดังนั้นแนวทางในการพัฒนา iOS สำหรับโหมดมืดไม่ได้ใช้ นี่เป็นเพียงปัญหาว่าแอปอีเมลของ Apple บน iOS 13 ในโหมดมืดกำลังแสดงอีเมล HTML

— เจสสิก้า
แหล่งที่มา

ซ้ำซ้อนกับปัญหา iOS13 White Color กับ textColor ของ UIKit

— Pratik Sodha

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

— Frank Schlegel

ที่เกี่ยวข้อง: webkit.org/blog/8840/dark-mode-support-in-webkit

— Frank Schlegel

@PratikSodha คำถามนั้นเกี่ยวข้องกับแอพ iOS ฉันแค่พูดถึงอีเมล HTML ที่แสดงในแอปอีเมลของ Apple ในโหมดมืด

— jessica

@ FrankSchlegel สีและสีพื้นหลังได้รับการตั้งค่าอย่างชัดเจนทุกที่และยังคงถูกเปลี่ยน ลิงค์ที่คุณให้ไว้มีคำตอบฉันต้องตั้งcolor-scheme: light onlyองค์ประกอบทั้งหมด ขอบคุณมาก.

— jessica

คำตอบ:

คุณสามารถบังคับให้ลบสิ่งนี้ได้ในอุปกรณ์ Apple แต่ตอนนี้เรามี Gmail และ Outlook บน Mac โดยไม่มีวิธีหยุดพวกเขา

ใส่สิ่งนี้ลงใน<head>:

<meta name="color-scheme" content="only">

"Only" ย่อมาจาก "Light only" (ซึ่งยังใช้งานได้)

นั่นจะแก้ไขสำหรับโหมดมืดของ iPhone และ Apple Mail แต่ไม่ใช่ Outlook บน Mac หรือ Gmail

ขณะนี้คุณสามารถแทนที่ Outlook บน Mac แต่ไม่มีแฮ็คที่รู้จักสำหรับ Gmail

นี่คือวิธีการแทนที่สำหรับ Outlook บน Mac:

<style type="text/css">
.body, .darkmode, .darkmode div { /* With class body on the body tag, and all elements represented here that have a background color */
    background-image: linear-gradient(#ffffff,#ffffff) !important;
}
.darkmode p { /* Add other selectors for other text elements */
    -webkit-text-fill-color: #000000 !important;
}
</style>

HT ถึงBrian Thies บนฟอรัม Litmus สำหรับสิ่งนี้

แต่เป็นการดีที่สุดที่จะลองและแก้ไขปัญหารากแทนที่จะเอาฟังก์ชั่น (โหมดมืด) ที่ลูกค้าของคุณต้องการ

Apple ได้จัดเตรียมวิธีดังกล่าวไว้ใน<head>:

<meta name="color-scheme" content="light dark">
<style type="text/css">
@media (prefers-color-scheme: dark) {
        .darkmode { background-color: #1e1e1e !important; }
        .darkmode p { color: #ffffff !important; }
}
</style>

นอกจากนี้ให้แน่ใจว่าองค์ประกอบนอกสุดของคุณด้วยสีพื้นหลังมีคลาส "darkmode" เช่น

 <table width="100%" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td align="center" class="darkmode" bgcolor="#ffffff" valign="top" style="padding: 0px 15px;">

โดยค่าเริ่มต้นคุณจะมีพื้นหลังสีขาวตัวอักษรสีดำ และในโหมดมืดมันจะเป็นพื้นหลังสีเข้มพร้อมข้อความแสง

(โปรดระบุรหัสเพื่อสอบถามเพิ่มเติม)

— นาธาน
แหล่งที่มา

ขอบคุณที่ลิงค์จาก @FrankSchlegel

https://webkit.org/blog/8840/dark-mode-support-in-webkit/

ใช้color-scheme: light onlyใน CSS ในองค์ประกอบทั้งหมดคือคำตอบ ขอบคุณ!

— เจสสิก้า
แหล่งที่มา