အီးမေးလ်များအတွက်အမှောင်စနစ်: အဲဒါဘာလဲ။ မည်သည့်ဖောက်သည်များက၎င်းကိုထောက်ပံ့ပေးသနည်း။ ဘာ Code လိုအပ်ပါသလဲ?

လွန်ခဲ့သောနှစ်အနည်းငယ်ကမှ Dark Mode ကိုစတင်ခဲ့ခြင်းနှင့်မွေးစားခြင်းသည်ကြီးထွားနေဆဲဖြစ်သည်။ အမှောင် mode ကို ယခု MacOS, iOS နှင့် Android တို့တွင်ရနိုင်သည်။ ထို့အပြင် Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail နှင့် Reddit စသည့် application များစွာရှိသည်။ တစ်ခုချင်းစီကိုအပြည့်အဝထောက်ခံမှုအမြဲရှိပါတယ်မဟုတ်။

အမှောင် mode သည်မျက်နှာပြင်စွမ်းအင်အသုံးပြုမှုကိုလျှော့ချပေးပြီးအာရုံစူးစိုက်မှုကိုတိုးစေသည်။ အချို့အသုံးပြုသူများက၎င်းတို့သည်မျက်စိ strain ကိုလျှော့ချသည်ဟုခံစားရကြောင်းပြောကြားခဲ့သည် မေးခွန်းထုတ်ခဲ့သည်.

မကြာသေးမီကကျွန်ုပ်တို့သည် Dark Cloud စနစ်ကို၎င်း၏ Code ထဲသို့ထည့်သွင်းထားသည့် Marketing Cloud template တစ်ခုကိုတီထွင်ခဲ့သည်။ ၎င်းသည်အီးမေးလ်ဂလိုင်းတစ်ခုတွင်ကြည့်ရှုသောအခါအီးမေးလ်ကဏ္dramaticallyများကိုသိသိသာသာခြားနားစေသည်။ သင်၏ကြိုးပမ်းမှုသည်သင်၏စာရင်းသွင်းသူများအတွက်ထပ်မံထိတွေ့ဆက်ဆံမှုနှင့်ကလစ်နှိပ်မှတဆင့်နှုန်းထားများကိုမောင်းနှင်နိုင်သည်။

အီးမေးလ်နည်းပညာတိုးတက်မှုများမကြာခဏပြုလုပ်လေ့မရှိသည့်အတွက်စက်မှုလုပ်ငန်းများ၌ဤအတွေ့အကြုံအားလက်ခံကျင့်သုံးခြင်းကိုတွေ့ရခြင်းက ၀ မ်းသာပါသည်။ အကောင်းဆုံးသောအလေ့အကျင့်များကိုနားလည်ရန်၊ အကောင်အထည်ဖော်ရန်ကုဒ်နှင့် client ထောက်ခံမှုတို့သည်သင်၏အမှောင်စနစ်၏အောင်မြင်မှုအတွက်အရေးကြီးသည်။ ထိုအကြောင်းကြောင့် Uplers မှအဖွဲ့သည်ဤလမ်းညွှန်ကိုထုတ်ဝေခဲ့သည် အမှောင်စနစ်အီးမေးလ်အထောက်အပံ့.

အမှောင် Mode အီးမေးလ်ကုဒ်

အဆင့် ၁ - အီးမေးလ် ၀ န်ဆောင်မှုများတွင်အမှောင်စနစ်ကို enable လုပ်ရန် metadata များကိုထည့်ပါ ပထမအဆင့် - အမှောင်မုဒ်ချိန်ညှိချက်များဖွင့်ထားသောသုံးစွဲသူများအတွက်အီးမေးလ်တွင်အမှောင်စနစ်ကိုဖွင့်ရန်ဖြစ်သည်။ သင်ဤ metadata များကိုထည့်သွင်းခြင်းအားဖြင့်သင်လုပ်နိုင်သည် tag ။

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

အဆင့် ၂ - @media အတွက်မှောင်မိုက်တဲ့ mode ပုံစံများကိုထည့်သွင်းပါ (prefers-color-scheme: dark) - ဤမီဒီယာရှာဖွေမှုကိုသင်၏ embedded တွင်ရေးပါ tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (MacOS) နှင့် Outlook App (iOS) ။ သင်၏အီးမေးလ်တွင်ဖော်ပြထားသောအမှတ်အသားကိုမလိုချင်ပါက .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; } 
}

အဆင့် ၃: အမှောင်မုဒ်ပုံစံများကိုပွားရန် [data-ogsc] ရှေ့ဆက်ကိုသုံးပါ Android အတွက် Outlook app တွင်အမှောင်မုဒ်နှင့်လိုက်ဖက်သောအီးမေးလ်အတွက်ဤကုဒ်များကိုထည့်သွင်းပါ။

[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 မှ body mode သို့မှောင်မိုက်သော mode များကိုသာထည့်ပါ - သင်၏ HTML tag များသည်မှန်ကန်တဲ့အမှောင်စနစ်အတန်းများရှိရမည်။

<!-- 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 အမှောင်စနစ်ကိုထောက်ပံ့ရန်နေ့စဉ်နှင့်အပတ်စဉ်သတင်းလွှာများသေချာပါစေ ဤနေရာတွင် subscribe။ မတူညီတဲ့အီးမေးလ်ဂလိုင်းများနှင့် ၄ င်းတို့၏စီးပွားဖြစ်ကုဒ်နည်းစနစ်များကြောင့်အီးမေးလ်ကုဒ်စနစ်အများစုကဲ့သို့ရိုးရှင်းသည့်လုပ်ငန်းစဉ်မဟုတ်ပါ။ ငါကြုံတွေ့ရသောအခက်အခဲတစ်ခုမှာခြွင်းချက်များဖြစ်သည်။ ဥပမာအားဖြင့်သင်အမှောင်စနစ်မည်သို့ပင်ရှိပါစေခလုတ်ပေါ်တွင်အဖြူရောင်စာသားကိုလိုချင်နေသည်။ ကုဒ်နံပါတ်ကအနည်းငယ်ရယ်စရာကောင်းတယ်။ အောက်ပါခြွင်းချက်တွေရှိရမယ်။

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

အပိုဆောင်းအရင်းအမြစ်များ -

• အချစ် - အီးမေးလ်စျေးကွက်ရှာဖွေသူများအတွက်အမှောင်မုဒ်အတွက်နောက်ဆုံးလမ်းညွှန်။
• ကမ်ပိန်း - အီးမေးလ်အတွက်အမှောင်မုဒ်သို့ developer များလမ်းညွှန်ပေးသည်။

Uplers Interactive Infographic ကိုကြည့်ပါ