Mode gelap dilancarkan beberapa tahun yang lalu dan penggunaan terus berkembang. Mod gelap kini tersedia di macOS, iOS, dan Android serta sejumlah aplikasi termasuk Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, dan Reddit. Walaupun begitu, tidak selalu ada sokongan penuh.
Mod gelap mengurangkan penggunaan tenaga skrin dan meningkatkan fokus. Beberapa pengguna juga menyatakan bahawa mereka merasakan pengurangan ketegangan mata, tapi itu telah disoal.
Baru-baru ini, kami mengembangkan templat Cloud Pemasaran yang memasukkan Mode Gelap ke dalam kodnya yang benar-benar menjadikan bahagian e-mel berbeza secara dramatik ketika dilihat dalam pelanggan e-mel. Ini adalah usaha yang dapat mendorong penglibatan dan kadar klik-tayang tambahan untuk pelanggan anda.
Tidak selalunya terdapat kemajuan dalam teknologi e-mel, jadi senang melihat penerapan pengalaman ini di seluruh industri. Memahami amalan terbaik, kod untuk dilaksanakan, dan sokongan pelanggan sangat penting bagi kejayaan pelaksanaan mod gelap. Atas sebab itu, pasukan di Uplers menerbitkan panduan ini ke sokongan e-mel mod gelap.
Kod E-mel Mod Gelap
Langkah 1: Sertakan metadata untuk mengaktifkan mod gelap pada pelanggan e-mel - Langkah pertama adalah mengaktifkan mod gelap dalam e-mel untuk pelanggan yang menghidupkan tetapan mod gelap. Anda boleh melakukannya dengan memasukkan metadata ini di teg.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Langkah 2: Sertakan gaya mod gelap untuk @media (preferers-warna-skema: gelap) - Tulis pertanyaan media ini di dalam anda tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), dan Aplikasi Outlook (iOS). Sekiranya anda tidak mahu logo yang digariskan dalam e-mel anda, anda boleh menggunakan kelas .dark-img dan .light-img seperti gambar di bawah.
@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; }
}Langkah 3: Gunakan awalan [data-ogsc] untuk menggandakan gaya mod gelap - Sertakan kod ini agar e-mel sesuai dengan mod gelap di aplikasi Outlook untuk 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; }Langkah 3: Sertakan gaya mod gelap sahaja ke HTML badan - Tag HTML anda mesti mempunyai kelas mod gelap yang betul.
<!-- 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 -->Petua Mod Gelap dan Sumber Tambahan
Saya telah mengusahakan Martech Zone buletin harian dan mingguan untuk menyokong mod gelap, pastikan untuk melakukannya langgan di sini. Seperti kebanyakan pengekodan e-mel, ini bukan proses yang mudah kerana pelanggan e-mel yang berbeza dan metodologi pengekodan proprietari mereka. Satu masalah yang saya hadapi adalah pengecualian ... sebagai contoh, anda mahu teks putih pada butang tanpa mengira mod gelap. Jumlah kod agak tidak masuk akal ... Saya mempunyai pengecualian berikut:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Beberapa sumber tambahan:
- Litmus - panduan utama untuk mod gelap untuk pemasar e-mel.
- CampaignMonitor - panduan pemaju untuk mod gelap untuk e-mel.
Lihat Infografik Interaktif Uplers
