डार्क मोड केही वर्ष पहिले मात्र सुरू गरिएको थियो र गोद लिन जारी छ। गाढा मोड अब म्याकोस, आईओएस, र एन्ड्रोइडका साथै माइक्रोसफ्ट आउटलुक, सफारी, रेडडिट, ट्विटर, यूट्यूब, जीमेल, र रेडडिट सहित अनुप्रयोगहरूको होस्टमा उपलब्ध छ। जहाँसुकै पनि त्यहाँ सधैं पूर्ण समर्थन हुँदैन।
गाढा मोडले स्क्रिन उर्जा प्रयोग घटाउँछ र फोकस बढाउँदछ। केही प्रयोगकर्ताहरू उनीहरूको आँखाको तनाव कम भएको महसुस पनि गर्छन्, तर त्यो हो प्रश्न गरीयो.
भर्खर हामीले मार्केटिंग क्लाउड टेम्प्लेट विकसित गर्यौं जुन डार्क मोडलाई यसको कोडमा समाहित गर्यो जसले ईमेल क्लाइन्टमा हेर्दा ईमेल खण्डहरूलाई नाटकीय रूपमा विरोधाभास बनाउँछ। यो एक प्रयास हो कि तपाईंको सment्ग्रहको लागि अतिरिक्त सment्लग्नता र क्लिक-थ्रू दरहरू ड्राइभ गर्न सक्दछ।
यो प्रायः ईमेल प्रविधिमा प्रगतिहरू भएको होइन, त्यसैले उद्योगमा यस अनुभवलाई अपनाईएकोमा राम्रै छ। उत्तम अभ्यासहरू, कार्यान्वयन गर्नका लागि कोड, र साथसाथ ग्राहक समर्थन बुझ्नु तपाईंको कालो मोडको कार्यान्वयन सफलताको लागि महत्वपूर्ण छ। त्यस कारणका लागि, अपलरहरूमा टोलीले यस गाइड लाई प्रकाशित गर्यो गाढा मोड ईमेल समर्थन.
गाढा मोड ईमेल कोड
चरण १: ईमेल ग्राहकहरूमा डार्क मोड सक्षम गर्न मेटाडाटा समावेश गर्नुहोस् - पहिलो चरण भनेको कालो मोड सेटिंग्स सक्षम भएका ग्राहकहरूका लागि ईमेलमा गाढा मोड सक्षम गर्नु हो। तपाईं यस मेटाडेटा लाई समावेश गरेर त्यसो गर्न सक्नुहुनेछ ट्याग
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">चरण २: @media का लागि गाढा मोड शैलीहरू समावेश गर्नुहोस् (र (्ग-योजना योजनाहरू: गाढा) - यो इम्बेडेड मा मिडिया क्वेरी लेख्नुहोस् tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, आउटलुक २०१ 2019 (म्याकोस), र आउटलुक अनुप्रयोग (आईओएस)। यदि तपाइँ तपाइँको इ-मेलमा बाह्यरेखा लोगो चाहनुहुन्न भने, तपाइँ .dark-img र .light-img वर्गहरू तल देखाइएको अनुसार प्रयोग गर्न सक्नुहुनेछ।
@media (prefers-color-scheme: dark ) {
.dark-mode-image { 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; }
.light-mode-image { display:none; display:none !important; }
}चरण:: गाढा मोड शैलीहरू नक्कल गर्न [डाटा-ogsc] उपसर्ग प्रयोग गर्नुहोस् - ईमेलको लागि एन्ड्रोइडको लागि आउटलुक अनुप्रयोगमा डार्क मोडसँग उपयुक्त हुनको लागि यी कोडहरू समावेश गर्नुहोस्।
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { 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; }चरण:: गाढा मोड-केवल शैलीहरू शरीर HTMLमा समावेश गर्नुहोस् - तपाईको एचटीएमएल ट्याग सही डार्क मोड वर्ग हुनुपर्दछ।
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" 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.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->ईमेल डार्क मोड सुझावहरू र अतिरिक्त संसाधनहरू
म काम गर्दै छु Martech Zone दैनिक र साप्ताहिक समाचारपत्रहरू कालो मोड समर्थन गर्न, निश्चित हुनुहोस् यहाँ सदस्यता लिनुहोस्। धेरै जसो ईमेल कोडिंगको साथ, यो एक साधारण प्रक्रिया होईन किनकि बिभिन्न ईमेल ग्राहकहरू र उनीहरूको स्वामित्व कोडिंग विधिहरूको कारण। मैले सामना गरेको एउटा मुद्दा अपवादहरू थिए ... उदाहरणका लागि, तपाइँ अन्धकार मोडको पर्वा बिना बटनमा सेतो पाठ चाहानुहुन्छ। कोडको मात्रा थोरै हास्यास्पद छ ... मसँग निम्न अपवादहरू थिए:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } केहि थप स्रोतहरू:
- लिटमस - ईमेल मार्केटरहरूको लागि गाढा मोडको लागि अन्तिम मार्गनिर्देशन।
- अभियानमोनिटर - विकासकर्ताहरूले ईमेलका लागि गाढा मोडमा गाईड गर्छन्।
अपलरहरू अन्तर्क्रियात्मक इन्फोग्राफिक हेर्नुहोस्
