HTML ईमेल में डार्क मोड कैसे इनेबल करें - वह सब कुछ जो आपको जानना आवश्यक है

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

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

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

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

IOS 13 अपडेट के साथ, सबसे लोकप्रिय ईमेल क्लाइंट में समर्थन 2.3% से बढ़कर 38.4% हो गया ! ऐप्पल मेल की लोकप्रियता के लिए एक बड़ा कदम धन्यवाद। आश्चर्यजनक रूप से, आउटलुक एकमात्र ईमेल क्लाइंट था जिसने एप्पल मेल से पहले इसका समर्थन किया था।

लोकप्रिय ईमेल क्लाइंट में डार्क मोड कैसे काम करता है

ईमेल संदेश को स्वयं गहरा करने के लिए, ईमेल क्लाइंट ईमेल के रंगों को पर्दे के पीछे स्वचालित रूप से उलट देते हैं। नियमित उपयोगकर्ता-से-उपयोगकर्ता ईमेल के लिए, यह सभी ईमेल क्लाइंट में अच्छी तरह से और लगातार काम करता है।

हालांकि, कस्टम HTML ईमेल के लिए यह इतना आसान नहीं है - वे जो हमारे अधिकांश इनबॉक्स को भरते हैं। मैं लेन-देन और प्रचार की बात कर रहा हूं।

ईमेल क्लाइंट डार्क मोड ईमेल रेंडरिंग को कैसे हैंडल करते हैं, इसमें मैंने ये अंतर पाया है:

* लोकप्रियता एक ही ईमेल क्लाइंट के लिए सभी प्लेटफार्मों पर साझा की जाती है क्योंकि इसे विश्वसनीय रूप से अलग नहीं किया जा सकता है। लोकप्रियता का स्रोत: लिटमस, 2019 ईमेल क्लाइंट मार्केट शेयर .

(परीक्षण से मेरे नोट्स देखने के लिए मूल पोस्ट पर जाएं, और नवीनतम परीक्षण देखने के लिए क्योंकि मैं धीरे-धीरे अधिक ईमेल क्लाइंट का परीक्षण करता हूं और पहले वहां लेख अपडेट करता हूं।)

HTML ईमेल को डार्क मोड के अनुकूल कैसे बनाएं

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

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

1) रंगों को एडजस्ट करना

Apple मेल के लिए देखें, क्योंकि यह रंगों को केवल तभी उलटता है जब पृष्ठभूमि का रंग पारदर्शी या अनिर्दिष्ट हो — सफेद पृष्ठभूमि काम नहीं करेगी . यह सुनिश्चित करने का सबसे आसान तरीका है कि आपके ईमेल किसी को भी अंधा नहीं करेंगे, यह जांचना है कि पृष्ठभूमि का रंग निर्दिष्ट है या नहीं। डिज़ाइन पर अधिक नियंत्रण के लिए, यह वह जगह है जहाँ 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 या क्रोम डेव टूल्स का उपयोग करें।

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

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

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

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

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

मेरा पसंदीदा अंतिम तरीका है, इसलिए आप यह कैसे करते हैं:

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

सीएसएस शैलियों में:

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

		.lightLogoWrapper,
		.lightLogo {
			display: block !important;
		}
	}
</style>

...और HTML संरचना:

<image src="dark-logo.png" class="darkLogo" />

<!--
	To hide the light logo perfectly in Outlook and Windows 10 Mail, 
	you need to wrap the light logo image tag with a div.
-->
<div class="lightLogoWrapper" style="mso-hide: all; display: none">
	<image src="light-logo.png" class="lightLogo" style="display: none" />
</div>

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

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

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

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

<!-- Default logo with 3-pixel wide background-matching border -->
<image src="dark-logo-with-background.png" class="darkLogoDefault" />

<!-- Light theme (so dark logo): 
This is for 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): 
This is for 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 शैलियाँ:

<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 में डार्क मोड आ रहा है

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

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

रैपिंग अप

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

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

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