HTML ईमेल में डार्क मोड सक्षम करें: आधुनिक क्लाइंट्स के लिए पूर्ण गाइड

नए iOS 13 अपडेट के साथ, Apple Mail को एक डार्क थीम मिल रही है। इसका मतलब है कि यह पहला प्रमुख ईमेल क्लाइंट है जो prefers-color-scheme CSS मीडिया क्वेरी का समर्थन करता है। इसलिए अब आप विशेष रूप से डार्क और लाइट दोनों थीम के लिए ईमेल डिजाइन कर सकते हैं।

मैं एक बड़ा डार्क मोड प्रशंसक हूँ, और चकाचौंध करने वाला उज्ज्वल ईमेल मेरा दुश्मन है। इसलिए जब मुझे iOS 13 में डार्क मोड के बारे में पता चला, तो मैंने स्पष्ट चीज की और चीजों का परीक्षण करने के लिए एक ब्रांड नया iPhone ऑर्डर किया।

जब मैं इस पर था, तो मैंने लगभग सभी ईमेल क्लाइंट्स में डार्क मोड कैसे काम करता है, इसका भी परीक्षण किया, जिसमें ट्रबलमेकर Outlook भी शामिल है। यहाँ मैंने क्या पाया।

लेकिन पहले, prefers-color-scheme क्या है?
prefers-color-scheme CSS मीडिया क्वेरी का उपयोग यह पता लगाने के लिए किया जाता है कि उपयोगकर्ता लाइट या डार्क थीम पसंद करता है या नहीं, जिससे दोनों के लिए विशेष रूप से ईमेल डिजाइन करना संभव हो जाता है।

iOS 13 अपडेट के साथ, सबसे लोकप्रिय ईमेल क्लाइंट्स में समर्थन 2.3% से 38.4% तक उछल गया! Apple Mail की लोकप्रियता के लिए एक बड़ा कदम। आश्चर्यजनक रूप से, Apple Mail से पहले Outlook एकमात्र ईमेल क्लाइंट था जिसने इसका समर्थन किया था।

ईमेल क्लाइंट	लोकप्रियता	डार्क UI	ऑटो-इनवर्ट ईमेल रंग	@media (prefers-color-scheme) समर्थन
Apple Mail iPhone + iPad	36.1%	✔ हाँ	✔ हाँ	✔ हाँ
Gmail Android 10	27.8% *	✔ हाँ	✔ हाँ	✖ नहीं
Gmail iOS 13	27.8% *	✖ नहीं	✖ नहीं	✖ नहीं
Gmail वेबमेल	27.8% *	✔ हाँ	✖ नहीं	✖ नहीं
Outlook iOS 13	9.1% *	✔ हाँ	✔ हाँ	✖ नहीं
Outlook Android 10	9.1% *	✔ हाँ	✔ हाँ	✖ नहीं
Outlook Windows 10	9.1% *	✔ हाँ	✔ हाँ	✖ नहीं
Outlook macOS	9.1% *	✔ हाँ	✔ हाँ	✔ हाँ
Apple Mail macOS	7.5%	✔ हाँ	✔ हाँ	✖ नहीं
Yahoo! वेबमेल	6.3% *	✔ हाँ	✖ नहीं	✖ नहीं
AOL वेबमेल	6.3% *	✖ नहीं	✖ नहीं	✖ नहीं
Outlook.com वेबमेल	2.3%	✔ हाँ	✔ हाँ	✔ हाँ
Windows 10 Mail Windows 10	0.5%	✔ हाँ	✔ हाँ	✖ नहीं
Zoho Mail वेबमेल	0.5% से कम	✔ हाँ	✔ हाँ	✖ नहीं
Mozilla Thunderbird Windows 10	0.5% से कम	✔ हाँ	✖ नहीं	✔ हाँ
Spark macOS	0.5% से कम	✔ हाँ	✔ हाँ	✔ हाँ
Spark iOS 13	0.5% से कम	✔ हाँ	✔ हाँ	✔ हाँ
Spark Android 9	0.5% से कम	✔ हाँ	✔ हाँ	✔ हाँ

HTML ईमेल को डार्क मोड फ्रेंडली कैसे बनाएं

मैंने पहले ही डेटा का उपयोग किया है, और कुछ Outlook संबंधी चुनौतियों के बाद, मैंने अपने ईमेल को डार्क मोड फ्रेंडली बना दिया। यहाँ आप भी ऐसा कैसे कर सकते हैं:

डेटा क्या कहता है:
55% से अधिक ईमेल डार्क मोड सक्षम के साथ खोले जा सकते हैं। एक बार Gmail डार्क साइड में शामिल हो जाता है, तो डार्क मोड सक्षम के साथ खोले जा सकने वाले ईमेल 83% तक बढ़ जाएंगे!

1) रंगों को समायोजित करना

Apple Mail पर नज़र रखें, क्योंकि यह रंगों को केवल तभी उल्टा करता है जब पृष्ठभूमि का रंग पारदर्शी या अनिर्दिष्ट हो — सफेद पृष्ठभूमि काम नहीं करेगी। यह सुनिश्चित करने का सबसे आसान तरीका कि आपके ईमेल किसी को अंधा नहीं करेंगे, यह जांचना है कि क्या पृष्ठभूमि रंग निर्दिष्ट है। डिजाइन पर अधिक नियंत्रण के लिए, यहीं prefers-color-scheme काम आता है।

सिंटैक्स (@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>

एक डिजाइन टिप: मुख्य टेक्स्ट के लिए शुद्ध सफेद #fff रंग से बचें। मैंने पाया कि मुख्य टेक्स्ट के लिए लगभग 11.5 का कंट्रास्ट अनुपात बहुत उज्ज्वल और बहुत मंद के बीच एक अच्छा समझौता है। कंट्रास्ट अनुपात यहां जांचें: https://contrast-ratio.com या Chrome dev tools का उपयोग करें।

कंट्रास्ट अनुपात उदाहरण

2) लाइट और डार्क लोगो के बीच स्विच करना

डार्क पृष्ठभूमि पर डार्क टेक्स्ट बहुत ज्यादा अदृश्य है, और ठीक यही होता है एक लोगो के साथ अगर इसे सक्षम डार्क मोड वाले ईमेल क्लाइंट में देखा जाता है।

आजकल, एक सामान्य लोगो में आमतौर पर पारदर्शी पृष्ठभूमि, रंगीन आइकन, और डार्क कॉपी होती है। समस्या देखें? क्योंकि ईमेल क्लाइंट्स छवि रंगों को उल्टा नहीं करते, आपको इसे स्वयं संभालने की आवश्यकता है।

इससे निपटने के लिए, आप या तो:

लोगो को पारदर्शी पृष्ठभूमि के बजाय सफेद पृष्ठभूमि के साथ सहेजें (इसे ठीक करने का सबसे आसान तरीका)। लेकिन मैं इस दृष्टिकोण की अनुशंसा नहीं करूंगा — डार्क मोड उपयोगकर्ता खुश नहीं होंगे।
डार्क पृष्ठभूमि पर एक लाइट लोगो रखें, और बाकी ईमेल को सफेद पृष्ठभूमि पर रखें (देखें Litmus कैसे करता है)।
डार्क मोड ईमेल को अपना डिफ़ॉल्ट बनाएं। इसके लिए एक अच्छा उम्मीदवार Spotify होगा क्योंकि वे अपने ऐप्स में केवल डार्क थीम प्रदान करते हैं।
prefers-color-scheme मीडिया क्वेरी के साथ अपने लोगो के लाइट और डार्क दोनों संस्करणों को शामिल करें और उनके बीच स्विच करें

मेरा पसंदीदा अंतिम दृष्टिकोण है, तो यहाँ आप इसे कैसे करते हैं:

सभी आधुनिक ईमेल क्लाइंट्स में डार्क लोगो पर एक साधारण "display: none" ठीक काम करता है। लेकिन सभी को आश्चर्यचकित करते हुए, यह Outlook और Windows 10 Mail में काम नहीं करता है।

CSS स्टाइल्स में:

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

…और HTML संरचना:

<image src="dark-logo.png" class="darkLogo" />
<!-- Outlook और Windows 10 Mail में लाइट लोगो को पूरी तरह से छिपाने के लिए, आपको लाइट लोगो इमेज टैग को एक div के साथ लपेटना होगा। -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
  <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

यह दृष्टिकोण काफी अच्छा काम करता है, लेकिन फिर भी यह बोर्ड भर में सही ढंग से काम नहीं करेगा। डार्क पृष्ठभूमि पर डार्क टेक्स्ट की समस्या उन ईमेल क्लाइंट्स के साथ होगी जो डार्क मोड का समर्थन करते हैं लेकिन prefers-color-scheme का समर्थन नहीं करते। वह है Outlook, Windows 10 Mail, Zoho, और संभावित रूप से Gmail।

डार्क मोड में लोगो समस्या

तो, ईमेल में लोगो को पूरी तरह से बुलेटप्रूफ बनाने के लिए, मैं ऊपर से विधि 1 और 4 को संयोजित करूँगा। विधि 1 उन सभी ईमेल क्लाइंट्स को कवर करेगी जो डार्क मोड का समर्थन करते हैं, लेकिन prefers-color-scheme नहीं। और विधि 4 Apple Mail, macOS पर Outlook, और Outlook.com को कवर करेगी, जो दोनों का समर्थन करते हैं।

साथ ही, लोगो को सफेद पृष्ठभूमि पर सहेजने के बजाय, मैं एक 3-पिक्सेल चौड़ी पृष्ठभूमि-मिलान बॉर्डर जोड़ूंगा और इसे हमेशा की तरह पारदर्शी पृष्ठभूमि पर सहेजूंगा।

यह सिर्फ एक लोगो के लिए काफी जटिल दिखने लगा है, तो आइए पहले HTML मार्कअप देखें:

<!-- डिफ़ॉल्ट लोगो 3-पिक्सेल चौड़ी पृष्ठभूमि-मिलान बॉर्डर के साथ -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />
<!-- लाइट थीम (इसलिए डार्क लोगो): यह Apple Mail, macOS पर Outlook, Outlook.com के लिए है -->
<div class="darkLogoWrapper" style="mso-hide: all; display: none">
  <image src="dark-logo.png" class="darkLogo" style="display: none" />
</div>
<!-- डार्क थीम (इसलिए लाइट लोगो): यह Apple Mail, macOS पर Outlook, Outlook.com के लिए है -->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
  <image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

…और CSS स्टाइल्स:

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

Gmail में डार्क मोड आ रहा है

नए Android 10 में Android के लिए डार्क मोड आ रहा है, और Gmail भी पूरी तरह से डार्क हो जाना चाहिए, अंततः। आपको बस Android 10 और नवीनतम Gmail (कम से कम संस्करण 2019.09.01.268168002) चाहिए। हालांकि, Google नई सुविधाओं (इस मामले में एक डार्क थीम) को उपयोगकर्ताओं के लिए धीरे-धीरे सर्वर-साइड पुश के साथ सक्षम करता है, और मुझे अभी तक इसके साथ भाग्य नहीं मिला है।

मुझे यह देखने की उत्सुकता है कि क्या @media prefers-color-scheme के लिए समर्थन Gmail में आ रहा है। मैंने जो पढ़ा है, उससे यह आशाजनक नहीं लगता। मुझे लगता है कि हमें पता लगाने के लिए इंतजार करना होगा। मैं लेख को अपडेट करूंगा जब मुझे Gmail में डार्क थीम सक्षम हो जाएगी।

समापन

डार्क मोड HTML ईमेल में आ रहा है, और मुझे यह पसंद है! लेकिन, यह चिंता करने वाली एक और चीज है – जैसे HTML टेबल का उपयोग लेआउट के लिए पर्याप्त नहीं था।

हमारी मेलिंग सूची में शामिल होकर ईमेल में डार्क मोड के बारे में अपडेट रहें। हम वहां अपने SaaS उत्पाद — Sidemail के निर्माण और विकास के दौरान आने वाली अंतर्दृष्टि और चुनौतियों को भी साझा करते हैं।

पढ़ने के लिए धन्यवाद!