Mode gelap diluncurkan hanya beberapa tahun yang lalu dan adopsi terus berkembang. Mode gelap kini tersedia di macOS, iOS, dan Android serta sejumlah aplikasi termasuk Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail, dan Reddit. Namun, tidak selalu ada dukungan penuh di masing-masing.
Mode gelap mengurangi penggunaan energi layar dan meningkatkan fokus. Beberapa pengguna juga menyatakan bahwa mereka merasakan ketegangan mata berkurang, tapi itu saja telah diinterogasi.
Baru-baru ini, kami mengembangkan template Cloud Pemasaran yang menggabungkan Mode Gelap ke dalam kodenya yang benar-benar membuat bagian email menjadi sangat kontras saat dilihat di klien email. Ini adalah upaya yang dapat mendorong keterlibatan tambahan dan rasio klik-tayang untuk pelanggan Anda.
Jarang ada kemajuan dalam teknologi email, jadi senang melihat penerapan pengalaman ini di seluruh industri. Memahami praktik terbaik, kode untuk diterapkan, serta dukungan klien sangat penting untuk keberhasilan penerapan mode gelap Anda. Oleh karena itu, tim di Uplers memublikasikan panduan ini kepada dukungan email mode gelap.
Kode Email Mode Gelap
Langkah 1: Sertakan metadata untuk mengaktifkan mode gelap di klien email - Langkah pertama adalah mengaktifkan mode gelap di email untuk pelanggan yang setelan mode gelapnya diaktifkan. Anda dapat melakukannya dengan memasukkan metadata ini di menandai.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Langkah 2: Sertakan gaya mode gelap untuk @media (prefers-color-scheme: dark) - Tulis kueri media ini di sematan Anda tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS), dan Outlook App (iOS). Jika Anda tidak menginginkan logo bergaris tepi di email Anda, Anda dapat menggunakan kelas .dark-img dan .light-img seperti yang ditunjukkan di bawah ini.
@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 menduplikasi gaya mode gelap - Sertakan kode ini agar email kompatibel dengan mode 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 hanya mode gelap ke tubuh HTML - Tag HTML Anda harus memiliki kelas mode gelap yang benar.
<!-- 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 -->Kirim Email Tip Mode Gelap dan Sumber Tambahan
Saya telah mengerjakan Martech Zone buletin harian dan mingguan untuk mendukung mode gelap, pastikan untuk berlangganan di sini. Seperti kebanyakan pengkodean email, ini bukan proses yang sederhana karena klien email yang berbeda dan metodologi pengkodean kepemilikan mereka. Satu masalah yang saya hadapi adalah pengecualian… misalnya, Anda menginginkan teks putih pada tombol terlepas dari mode gelap. Jumlah kodenya agak konyol ... Saya harus memiliki 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:
- Lakmus - panduan utama untuk mode gelap bagi pemasar email.
- Monitor Kampanye - panduan pengembang ke mode gelap untuk email.
Lihat Infografis Interaktif Uplers
