Ang dark mode gilansad pipila na lang ka tuig ang milabay ug nagpadayon ang pagtubo. Dark mode magamit na karon sa tibuuk macOS, iOS, ug Android ingon man daghang host apps lakip ang Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, ug Reddit. Hinuon dili kanunay puno ang suporta sa matag usa.
Ang madulom nga mode nagpaminus sa paggamit sa enerhiya sa screen ug nagdugang sa pag-focus. Giingon usab sa pipila nga mga ninggamit nga gibati nila ang pagkunhod sa pagkaput sa mata, apan kana gipangutana.
Bag-ohay lang, naghimo kami usa ka template sa Marketing Cloud nga gilakip ang Dark Mode sa iyang code nga tinuud nga naghimo sa mga seksyon sa email nga dako nga pagkalainlain kung nakita sa usa ka kliyente sa email. Kini usa ka paningkamot nga mahimong magdala dugang nga mga rate sa pag-apil ug pag-click-through alang sa imong mga suskritor.
Dili kanunay nga adunay mga pag-uswag sa teknolohiya sa email, busa nindot nga makita ang pagsagup sa kini nga kasinatian sa tibuuk nga industriya. Ang pagsabut sa labing kaayo nga mga buhat, code nga ipatuman, ingon man ang suporta sa kliyente hinungdanon sa imong kalampusan sa pagpatuman sa dark mode. Tungod niana nga hinungdan, ang koponan sa Uplers nagmantala sa kini nga panudlo sa suporta sa dark mode email.
Dark Mode Email Code
Lakang 1: Ilakip ang metadata aron mapalihok ang dark mode sa mga kliyente sa email - Ang una nga lakang mao ang pagpaandar sa dark mode sa email alang sa mga suskritor nga nakabukas ang ilang setting sa dark mode. Mahimo nimo kini pinaagi sa pag-apil sa kini nga metadata sa tag
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Lakang 2: Ilakip ang mga estilo sa itom nga mode alang sa @media (mas gusto ang color-scheme: itom) - Isulat kini nga pangutana sa media sa imong gi-embed tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), ug Outlook App (iOS). Kung dili nimo gusto ang usa ka gilatid nga logo sa imong email, mahimo nimong gamiton ang mga klase sa .dark-img ug .light-img sama sa gipakita sa ubus.
@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; }
}Lakang 3: Gamita ang [data-ogsc] preview aron madoble ang mga estilo sa itom nga mode - Ilakip kini nga mga code alang sa email aron mahiuyon sa dark mode sa Outlook app alang sa Android.
[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; }Lakang 3: Ilakip ang mga estilo nga itom lang nga mode sa body HTML - Ang imong HTML tag kinahanglan adunay tama nga klase sa dark mode.
<!-- 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 -->Mga Tip sa Dark Mode sa Email ug Dugang nga Mga Kapanguhaan
Nagtrabaho na ako sa Martech Zone adlaw-adlaw ug matag semana nga mga newsletter aron suportahan ang dark mode, siguruha nga subscribe dinhi. Sama sa kadaghanan sa pag-coding sa email, dili kini usa ka yano nga proseso tungod sa lainlaing mga kliyente sa email ug ilang mga pamaagi sa pagpanag-iya sa tag-iya. Ang usa ka isyu nga akong nasugatan mao ang mga eksepsyon… pananglitan, gusto nimo ang puti nga teksto sa usa ka butones bisan unsa man ang itum nga mode. Ang kantidad sa code medyo kataw-anan… Kinahanglan nako nga adunay mga mosunud:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Pipila nga dugang nga mga kapanguhaan:
- Litmus - ang katapusang giya alang sa ngitngit nga mode alang sa mga namaligya sa email.
- CampaignMonitor - Giya sa mga developer sa dark mode alang sa email.
Tan-awa ang Mga Uplers Interactive Infographic
