Chế độ tối đã được ra mắt chỉ một vài năm trước và việc áp dụng tiếp tục phát triển. Chế độ tối hiện có sẵn trên macOS, iOS và Android cũng như một loạt các ứng dụng bao gồm Microsoft Outlook, Safari, Reddit, Twitter, Youtube, Gmail và Reddit. Tuy nhiên, không phải lúc nào cũng có sự hỗ trợ đầy đủ cho mỗi bên.
Chế độ tối giảm mức sử dụng năng lượng màn hình và tăng khả năng tập trung. Một số người dùng cũng cho biết họ cảm thấy giảm mỏi mắt, nhưng đó là được hỏi.
Gần đây, chúng tôi đã phát triển một mẫu Marketing Cloud kết hợp Chế độ tối vào mã của nó để thực sự làm cho các phần email tương phản đáng kể khi xem trong ứng dụng email khách. Đó là một nỗ lực có thể thúc đẩy tỷ lệ tương tác và nhấp bổ sung cho người đăng ký của bạn.
Không thường xuyên có những tiến bộ trong công nghệ email, vì vậy thật tuyệt khi thấy trải nghiệm này được áp dụng trong toàn ngành. Hiểu các phương pháp hay nhất, mã để triển khai, cũng như hỗ trợ khách hàng là rất quan trọng để bạn triển khai thành công chế độ tối. Vì lý do đó, nhóm tại Uplers đã xuất bản hướng dẫn này để hỗ trợ chế độ tối qua email.
Mã email ở chế độ tối
Bước 1: Bao gồm siêu dữ liệu để bật chế độ tối trong ứng dụng email - Bước đầu tiên là bật chế độ tối trong email cho những người đăng ký đã bật cài đặt chế độ tối. Bạn có thể làm như vậy bằng cách đưa siêu dữ liệu này vào nhãn.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">Bước 2: Bao gồm các kiểu chế độ tối cho @media (ưu tiên phối màu: tối) - Viết truy vấn phương tiện này trong tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) và Outlook App (iOS). Nếu bạn không muốn có logo có đường viền trong email của mình, bạn có thể sử dụng các lớp .dark-img và .light-img như hình dưới đây.
@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; }
}Bước 3: Sử dụng tiền tố [data-ogsc] để sao chép kiểu chế độ tối - Bao gồm các mã này để email tương thích với chế độ tối trong ứng dụng Outlook dành cho 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; }Bước 3: Đưa các kiểu chỉ ở chế độ tối vào HTML nội dung - Các thẻ HTML của bạn phải có đúng lớp chế độ tối.
<!-- 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 -->Gửi các mẹo về chế độ tối và tài nguyên bổ sung qua email
Tôi đã làm việc trên Martech Zone bản tin hàng ngày và hàng tuần để hỗ trợ chế độ tối, hãy đảm bảo Đăng ký tại đây. Như với hầu hết mã hóa email, đây không phải là một quá trình đơn giản do các ứng dụng email khác nhau và các phương pháp mã hóa độc quyền của họ. Một vấn đề tôi gặp phải là ngoại lệ… ví dụ, bạn muốn văn bản màu trắng trên một nút bất kể chế độ tối. Số lượng mã hơi vô lý… Tôi phải có các ngoại lệ sau:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } Một số tài nguyên bổ sung:
- màu xanh lấy ở loài rêu - hướng dẫn cuối cùng về chế độ tối cho các nhà tiếp thị email.
- Chiến dịch viên - các nhà phát triển hướng dẫn về chế độ tối cho email.
Xem đồ họa thông tin tương tác của Uplers
