Mòd nwa te lanse jis kèk ane de sa ak adopsyon kontinye ap grandi. Mòd nwa se kounye a disponib atravè macOS, iOS, ak android kòm byen ke yon lame nan apps ki gen ladan Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, ak Reddit. Pa gen toujou sipò konplè atravè chak, menm si.
Mòd nwa diminye itilizasyon enèji ekran ak ogmante konsantre. Gen kèk itilizatè ki deklare tou yo santi yo yon rediksyon nan souch je, men sa a te kesyone.
Dènyèman, nou devlope yon modèl Cloud Maketing ki enkòpore Mode nwa nan kòd li yo ki reyèlman fè seksyon imèl yo dramatikman kontras lè yo wè li nan yon kliyan imel. Li se yon efò ki ka kondwi plis angajman ak klike sou-a pousantaj pou abonnés ou yo.
Li pa souvan ke gen avans nan teknoloji imel, kidonk li bèl yo wè adopsyon eksperyans sa a atravè endistri an. Konprann pi bon pratik, kòd aplike, osi byen ke sipò kliyan se kritik nan siksè aplikasyon ou nan mòd nwa. Pou rezon sa a, ekip la nan Uplers pibliye gid sa a sipò fè nwa imel mòd.
Fènwa Mode Imèl Kòd
Etap 1: Mete metadata yo ki ap pèmèt mòd nwa nan kliyan imel - Premye etap la se yo ki ap pèmèt mòd nwa nan imèl la pou abonnés ki gen anviwònman mòd nwa yo vire sou. Ou ka fè sa pa enkli metadata sa a nan tag.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Etap 2: Mete estil mòd nwa pou @ medya (prefere-koulè-konplo: nwa) - Ekri rechèch sa a medya nan entegre ou tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, pespektiv 2019 (macOS), ak pespektiv App (iOS). Si ou pa vle yon logo ki endike nan imèl ou, ou ka itilize klas .dark-img ak .light-img jan yo montre anba a.
@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; }
}Etap 3: Sèvi ak [done-ogsc] prefiks pou kopi estil mòd nwa - Mete kòd sa yo pou imèl la dwe konpatib ak mòd nwa nan pespektiv app pou 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; }Etap 3: Mete estil mòd nwa sèlman nan kò a HTML - Tags HTML ou yo dwe gen klas ki kòrèk mòd nwa.
<!-- 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 -->Imèl Konsèy Mode nwa ak Resous Lòt
Mwen te travay sou la Martech Zone bilten chak jou ak chak semèn sipòte mòd nwa, asire w ke ou abònman isit la. Menm jan ak pifò imèl kodaj, li pa yon pwosesis ki senp akòz kliyan imel yo diferan ak metodoloji propriétaires kodaj yo. Yon pwoblèm mwen te rankontre te eksepsyon ... pou egzanp, ou vle tèks blan sou yon bouton kèlkeswa mòd nwa. Kantite kòd la se yon ti jan ridikil ... Mwen te gen eksepsyon sa yo:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Kèk resous adisyonèl:
- Lidr - gid la ultim pou mòd nwa pou mache imel.
- CampaignMonitor - devlopè yo gide nan mòd nwa pou imèl.
View Uplers entèaktif Infographic
