ਡਾਰਕ ਮੋਡ ਕੁਝ ਸਾਲ ਪਹਿਲਾਂ ਲਾਂਚ ਕੀਤਾ ਗਿਆ ਸੀ ਅਤੇ ਗੋਦ ਲੈਣ ਦਾ ਕੰਮ ਜਾਰੀ ਹੈ. ਡਾਰਕ ਮੋਡ ਹੁਣ ਮੈਕੋਸ, ਆਈਓਐਸ ਅਤੇ ਐਂਡਰਾਇਡ ਦੇ ਨਾਲ ਨਾਲ ਮਾਈਕਰੋਸੌਫਟ ਆਉਟਲੁੱਕ, ਸਫਾਰੀ, ਰੈਡਡੀਟ, ਟਵਿੱਟਰ, ਯੂਟਿ ,ਬ, ਜੀਮੇਲ, ਅਤੇ ਰੈਡਡਿਟ ਸਮੇਤ ਕਈ ਐਪਸ ਦੇ ਮੇਜ਼ਬਾਨ ਉਪਲਬਧ ਹਨ. ਹਾਲਾਂਕਿ, ਹਰੇਕ ਵਿੱਚ ਹਮੇਸ਼ਾ ਪੂਰਾ ਸਮਰਥਨ ਨਹੀਂ ਹੁੰਦਾ.
ਡਾਰਕ ਮੋਡ ਸਕ੍ਰੀਨ energyਰਜਾ ਦੀ ਵਰਤੋਂ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ ਅਤੇ ਫੋਕਸ ਵਧਾਉਂਦਾ ਹੈ. ਕੁਝ ਉਪਭੋਗਤਾ ਇਹ ਵੀ ਕਹਿੰਦੇ ਹਨ ਕਿ ਉਹ ਅੱਖਾਂ ਦੇ ਦਬਾਅ ਵਿੱਚ ਕਮੀ ਮਹਿਸੂਸ ਕਰਦੇ ਹਨ, ਪਰ ਇਹ ਉਹ ਹੈ ਪੁੱਛਗਿੱਛ ਕੀਤੀ ਗਈ ਹੈ.
ਹਾਲ ਹੀ ਵਿੱਚ, ਅਸੀਂ ਇੱਕ ਮਾਰਕੀਟਿੰਗ ਕਲਾਉਡ ਟੈਂਪਲੇਟ ਵਿਕਸਿਤ ਕੀਤਾ ਹੈ ਜਿਸਨੇ ਡਾਰਕ ਮੋਡ ਨੂੰ ਇਸਦੇ ਕੋਡ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤਾ ਹੈ ਜੋ ਅਸਲ ਵਿੱਚ ਈਮੇਲ ਭਾਗਾਂ ਨੂੰ ਨਾਟਕੀ .ੰਗ ਨਾਲ ਉਲਟ ਬਣਾਉਂਦਾ ਹੈ ਜਦੋਂ ਇੱਕ ਈਮੇਲ ਕਲਾਇੰਟ ਵਿੱਚ ਵੇਖਿਆ ਜਾਂਦਾ ਹੈ. ਇਹ ਇਕ ਅਜਿਹਾ ਉਪਰਾਲਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਗਾਹਕਾਂ ਲਈ ਵਾਧੂ ਰੁਝੇਵਿਆਂ ਅਤੇ ਕਲਿਕ-ਥ੍ਰੂ ਰੇਟਾਂ ਨੂੰ ਚਲਾ ਸਕਦਾ ਹੈ.
ਇਹ ਅਕਸਰ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਈਮੇਲ ਤਕਨਾਲੋਜੀ ਵਿੱਚ ਤਰੱਕੀ ਹੁੰਦੀ ਹੈ, ਇਸ ਲਈ ਸਾਰੇ ਉਦਯੋਗ ਵਿੱਚ ਇਸ ਅਨੁਭਵ ਨੂੰ ਅਪਣਾਉਂਦੇ ਹੋਏ ਵੇਖਣਾ ਚੰਗਾ ਲੱਗਿਆ. ਬਿਹਤਰ ਅਭਿਆਸਾਂ, ਲਾਗੂ ਕਰਨ ਲਈ ਕੋਡ, ਅਤੇ ਨਾਲ ਹੀ ਕਲਾਇੰਟ ਸਪੋਰਟ ਨੂੰ ਸਮਝਣਾ ਡਾਰਕ ਮੋਡ ਦੀ ਤੁਹਾਡੀ ਲਾਗੂ ਕਰਨ ਦੀ ਸਫਲਤਾ ਲਈ ਮਹੱਤਵਪੂਰਣ ਹੈ. ਇਸੇ ਕਾਰਨ ਕਰਕੇ, ਅਪਲਰਜ਼ ਵਿਖੇ ਟੀਮ ਨੇ ਇਸ ਗਾਈਡ ਨੂੰ ਪ੍ਰਕਾਸ਼ਤ ਕੀਤਾ ਡਾਰਕ ਮੋਡ ਈਮੇਲ ਸਹਾਇਤਾ.
ਡਾਰਕ ਮੋਡ ਈਮੇਲ ਕੋਡ
ਕਦਮ 1: ਈਮੇਲ ਕਲਾਇੰਟਸ ਵਿੱਚ ਡਾਰਕ ਮੋਡ ਨੂੰ ਸਮਰੱਥ ਕਰਨ ਲਈ ਮੈਟਾਡੇਟਾ ਸ਼ਾਮਲ ਕਰੋ - ਪਹਿਲਾ ਕਦਮ ਉਹਨਾਂ ਗਾਹਕਾਂ ਲਈ ਈਮੇਲ ਵਿੱਚ ਡਾਰਕ ਮੋਡ ਨੂੰ ਸਮਰੱਥ ਕਰਨਾ ਹੈ ਜਿਨ੍ਹਾਂ ਦੀਆਂ ਡਾਰਕ ਮੋਡ ਸੈਟਿੰਗਾਂ ਚਾਲੂ ਹਨ. ਤੁਸੀਂ ਇਸ ਵਿੱਚ ਮੈਟਾਡੇਟਾ ਨੂੰ ਸ਼ਾਮਲ ਕਰਕੇ ਅਜਿਹਾ ਕਰ ਸਕਦੇ ਹੋ ਟੈਗ.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">ਕਦਮ 2: @ ਮੀਡੀਆ ਲਈ ਡਾਰਕ ਮੋਡ ਸਟਾਈਲ ਸ਼ਾਮਲ ਕਰੋ (ਤਰਜੀਹ-ਰੰਗ-ਯੋਜਨਾ: ਹਨੇਰਾ) - ਆਪਣੇ ਮੀਡੀਆ ਵਿੱਚ ਇਸ ਮੀਡੀਆ ਨੂੰ ਪੁੱਛੋ 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; }
}ਕਦਮ 3: ਡਾਰਕ ਮੋਡ ਸਟਾਈਲ ਨੂੰ ਡੁਪਲਿਕੇਟ ਕਰਨ ਲਈ [ਡੇਟਾ-ਓਗਸਕੇਸ) ਅਗੇਤਰ ਦੀ ਵਰਤੋਂ ਕਰੋ - ਐਂਡਰਾਇਡ ਲਈ ਆਉਟਲੁੱਕ ਐਪ ਵਿੱਚ ਡਾਰਕ ਮੋਡ ਦੇ ਅਨੁਕੂਲ ਹੋਣ ਲਈ ਇਹ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ.
[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; }ਕਦਮ 3: ਡਾਰਕ ਮੋਡ-ਸਟਾਈਲ ਨੂੰ ਸਿਰਫ ਬਾਡੀ HTML ਵਿਚ ਸ਼ਾਮਲ ਕਰੋ - ਤੁਹਾਡੇ 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 ਡਾਰਕ ਮੋਡ ਨੂੰ ਸਪੋਰਟ ਕਰਨ ਲਈ ਰੋਜ਼ਾਨਾ ਅਤੇ ਹਫਤਾਵਾਰੀ ਨਿ newsletਜ਼ਲੈਟਰ, ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਇੱਥੇ ਸਬਸਕ੍ਰਾਈਬ ਕਰੋ. ਜਿਵੇਂ ਕਿ ਜ਼ਿਆਦਾਤਰ ਈਮੇਲ ਕੋਡਿੰਗ ਦੀ ਤਰ੍ਹਾਂ, ਵੱਖਰੇ ਈਮੇਲ ਕਲਾਇੰਟਾਂ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਮਾਲਕੀ ਕੋਡਿੰਗ ਵਿਧੀਆਂ ਦੇ ਕਾਰਨ ਇਹ ਸਧਾਰਨ ਪ੍ਰਕਿਰਿਆ ਨਹੀਂ ਹੈ. ਇੱਕ ਮੁੱਦਾ ਜਿਸਦਾ ਮੈਂ ਖਿਆਲ ਕੀਤਾ ਉਹ ਅਪਵਾਦ ਸੀ ... ਉਦਾਹਰਣ ਦੇ ਲਈ, ਤੁਸੀਂ ਇੱਕ ਬਟਨ 'ਤੇ ਚਿੱਟਾ ਪਾਠ ਚਾਹੁੰਦੇ ਹੋ, ਪਰ ਹਨੇਰਾ ofੰਗ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾਂ. ਕੋਡ ਦੀ ਮਾਤਰਾ ਥੋੜਾ ਹਾਸੋਹੀਣੀ ਹੈ ... ਮੇਰੇ ਕੋਲ ਹੇਠਾਂ ਦਿੱਤੇ ਅਪਵਾਦ ਸਨ:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } ਕੁਝ ਵਾਧੂ ਸਰੋਤ:
- ਲਿਟਮਸ - ਈਮੇਲ ਮਾਰਕਿਟਰਾਂ ਲਈ ਡਾਰਕ ਮੋਡ ਲਈ ਅੰਤਮ ਗਾਈਡ.
- ਮੁਹਿੰਮ ਮਾਨੀਟਰ - ਡਿਵੈਲਪਰ ਈਮੇਲ ਲਈ ਡਾਰਕ ਮੋਡ ਲਈ ਗਾਈਡ ਕਰਦੇ ਹਨ.
ਉਪਲਰ ਇੰਟਰਐਕਟਿਵ ਇਨਫੋਗ੍ਰਾਫਿਕ ਵੇਖੋ
