ईमेल को तोड़ने से iOS 13 डार्क मोड को कैसे रोकें

हमारे पास एक ई-कॉमर्स ऐप है जो खरीदारी करते समय ऑर्डर विवरण भेजता है, और हमने उस ईमेल टेम्पलेट को फिर से डिज़ाइन किया है। हमें पिछले कुछ दिनों में कुछ ग्राहकों की रिपोर्ट मिली है कि ईमेल में आधा पाठ गायब है।

आखिरकार स्क्रीनशॉट मिलने के बाद, हमें पता चला है कि समस्या डार्क मोड का उपयोग करते हुए iPhones पर हो रही है। अब तक वे सभी मेल ऐप के साथ या सफारी (दोनों की एक ही समस्या है) के साथ जीमेल का उपयोग कर रहे हैं। मुझे यकीन नहीं है कि अगर जीमेल कारक प्रासंगिक है या संयोग है।

हमारा ईमेल सरल है - इसमें एक सफेद पृष्ठभूमि, ग्रे हेडिंग और ब्लैक बॉडी टेक्स्ट है। डार्क मोड सफेद पृष्ठभूमि और ग्रे हेडिंग को अछूता छोड़ रहा है, लेकिन शरीर के पाठ को काले से सफेद में बदला जा रहा है। सफेद पृष्ठभूमि पर, सफेद पाठ स्पष्ट रूप से अदृश्य है, और ईमेल ऐसा दिखता है कि इसमें बड़ी मात्रा में सामग्री गायब है।

क्या हमारे टेक्स्ट को काले से सफेद में बदलने से डार्क मोड को रोकने के लिए कुछ किया जा सकता है?

मुझे ध्यान देना चाहिए कि हमारे पास ईमेल में एक QR कोड भी है, इसलिए मैं उन समाधानों के बारे में चिंतित हूं जो हमारे पूर्ण ईमेल को पुनः प्राप्त करने के लिए डार्क मोड को आगे बढ़ने की अनुमति देंगे, क्योंकि मेरा मानना है कि यह QR कोड को पहचाना जाना कठिन होगा। ।

संपादित करें: यह किसी भी ऐप कोड से संबंधित नहीं है, इसलिए अंधेरे मोड के लिए iOS विकसित करने के दिशानिर्देश लागू नहीं होते हैं। यह बस एक मुद्दा है कि कैसे अंधेरे मोड में iOS 13 पर Apple का मेल ऐप एक HTML ईमेल प्रदर्शित कर रहा है।

— जेसिका
स्रोत

के संभावित डुप्लिकेट UIKit की textcolor साथ iOS13 व्हाइट रंग मुद्दा

— प्रतीक सोढा

यदि आप फ़ॉन्ट का रंग स्पष्ट रूप से सेट करते हैं तो क्या होता है? मैं मान लेता हूं कि डार्क मोड केवल फ़ॉन्ट को सफेद में बदल देता है अगर यह डिफ़ॉल्ट रंग के साथ छोड़ दिया जाता है।

— फ्रैंक श्लेगल

संबंधित: webkit.org/blog/8840/dark-mode-support-in-webkit

— फ्रैंक श्लेगल

@PratikSodha जो सवाल आईओएस ऐप से संबंधित है, मैं बस ऐप्पल के मेल ऐप में डार्क मोड में प्रदर्शित एक HTML ईमेल के बारे में बात कर रहा हूं।

— जेसिका

@FrankSchlegel रंग और पृष्ठभूमि-रंग स्पष्ट रूप से हर जगह सेट किया गया था, और अभी भी स्थानांतरित किया जा रहा था। आपके द्वारा प्रदान की गई लिंक का उत्तर था, मुझे color-scheme: light onlyसभी तत्वों पर सेट करना था । बहुत बहुत धन्यवाद।

— जेसिका

जवाबों:

आप Apple उपकरणों पर जबरन इसे हटा सकते हैं, लेकिन अब हमारे पास मैक पर जीमेल और आउटलुक है और उन्हें रोकने का कोई तरीका नहीं है।

सीधे शब्दों में कहें <head>:

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

"केवल" लाइट ओनली "के लिए संक्षिप्त है (जो अभी भी काम करता है)

यह iPhone डार्क मोड और Apple मेल के लिए तय करेगा लेकिन मैक या जीमेल पर आउटलुक नहीं ।

आप वर्तमान में मैक पर आउटलुक को ओवरराइड कर सकते हैं, लेकिन जीमेल के लिए कोई ज्ञात हैक नहीं है।

यहाँ मैक पर आउटलुक के लिए ओवरराइड करने का तरीका बताया गया है:

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

इसके लिए लिटमस फोरम पर ब्रायन थिएस को एचटी

लेकिन अपने ग्राहकों को एक कार्यक्षमता (डार्क मोड) को हटाने के बजाय रूट समस्या को सुलझाने और ठीक करने के लिए सबसे अच्छा है।

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>

इसके अलावा, सुनिश्चित करें कि पृष्ठभूमि-रंग के साथ आपके बाहरी तत्व में वर्ग "डार्कमोड" है, उदाहरण के लिए

 <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सभी तत्वों पर सीएसएस में उपयोग उत्तर था। धन्यवाद!

— जेसिका
स्रोत