Ua hoʻolana ʻia ka mode pouli i kekahi mau makahiki i hala aku nei a ke hoʻomau nei ka ulu ʻana o ka hānai. Ipo pōuliuli Loaʻa i kēia manawa ma o nā macOS, iOS, a me Android a me nā polokalamu like pū me Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, a me Reddit. ʻAʻole naʻe he kākoʻo piha i kēlā me kēia.
Hoʻoemi ka mode pouli i ka hoʻohana ikehu pale a hoʻonui i ka nānā. Wahi a kekahi mau mea hoʻohana manaʻo lākou i ka hoʻēmi o ka maka o ka maka, akā ʻo ia ua nīnau ʻia.
I kēia mau lā, ua hoʻomohala mākou i kahi template Cloud Marketing i hoʻohui i ka mode Dark i kāna code e hana ʻokoʻa i nā ʻaoʻao leka uila ke nānā ʻia i kahi mea kūʻai leka uila. He hana ia e hoʻokele ai i ka hoʻopili hou ʻana a me nā helu kaomi ma waena o kāu mau mea kau inoa.
ʻAʻole pinepine ka holomua o ka ʻenehana leka uila, no laila ʻoluʻolu ke ʻike i ka lawe ʻia o kēia ʻike ma waena o ka ʻoihana. ʻO ka hoʻomaopopo ʻana i nā hana ʻoi loa, ke code e hoʻokō ai, a me ke kākoʻo o nā mea kūʻai aku koʻikoʻi i kāu hoʻokō pono ʻana i ka mode pouli. No kēlā kumu, ua paʻi ka hui ma Uplers i kēia alakaʻi i kākoʻo leka uila ʻano pouli.
Pāʻālua leka uila ʻano pouli
KaʻAnuʻu Hana 1: Hoʻopili i nā metadata e hiki ai i ke ʻano pouli i nā mea kūʻai aku leka uila - ʻO ka hana mua e hiki ai i ka ʻeleʻele i ka leka uila no nā mea kau inoa i huli i kā lākou hoʻonohonoho ʻano ʻeleʻele. Hiki iā ʻoe ke hana pēlā ma ka hoʻopili ʻana i kēia metadata i ka tag
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">KaʻAnuʻu 2: Hoʻopili i nā kaila ʻano pouli no @media (makemake i ka-ʻāpana kala: ʻeleʻele) - Kākau i kēia nīnau Media ma kāu i hoʻokomo ʻia tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), a me Outlook App (iOS). Inā ʻaʻole ʻoe makemake i kahi lepili i kuhikuhi ʻia i kāu leka uila, hiki iā ʻoe ke hoʻohana i nā papa .dark-img a me .light-img e like me ka mea i hōʻike ʻia ma lalo nei.
@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; }
}KaʻAnuʻu Hana 3: E hoʻohana i ka pīkoi [data-ogsc] e hoʻopālua i nā ʻano ʻano pouli - Hoʻopili i kēia mau loina no ka hoʻopili ʻana o ka leka uila me ka mode pouli ma ka polokalamu Outlook no 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; }KaʻAnuʻu Hana 3: Hoʻopili i nā kaila ʻeleʻele-wale nō i ke kino HTML - Pono i kāu mau māka HTML nā papa mode pouli pololei.
<!-- 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 -->Nā ʻōlelo aʻoaʻo a me nā kumuwaiwai ʻē aʻe
Ke hana nei wau ma ka Martech Zone i kēlā me kēia pule a me nā pule nūpepa e kākoʻo i ke ʻano pouli, e e kākau inoa maʻaneʻi. E like me ka hapanui o ka helu ʻana i nā leka uila, ʻaʻole ia he hana maʻalahi ma muli o nā mea kūʻai aku leka uila ʻokoʻa a me kā lākou ʻano hana kivila ponoʻī. Hoʻokahi pilikia aʻu i holo ai i loko o nā ʻokoʻa ... ʻo kahi laʻana, makemake ʻoe i ke kikokiko keʻokeʻo ma kahi pihi me ka nānā ʻole i ka ʻano pouli. He mea hoʻomakeʻaka ka nui o ke code… Pono wau e loaʻa i kēia mau ʻokoʻa i lalo:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } ʻO kekahi mau kumuwaiwai hou aʻe:
- Litmus - ke alakaʻi hope loa no ke ʻano pouli no nā mea kūʻai aku leka uila.
- ʻOi Pelekania - alakaʻi nā mea hoʻomohala i ke ʻano pouli no ka leka uila.
E nānā iā Uplers Interactive Infographic
