حالت تاریک فقط چند سال پیش راه اندازی شد و روند پذیرش همچنان رشد می کند. حالت تیره اکنون در MacOS ، iOS و Android و همچنین میزبان برنامه هایی از جمله Microsoft Outlook ، Safari ، Reddit ، Twitter ، Youtube ، Gmail و Reddit در دسترس است. هرچند همیشه پشتیبانی کاملی در بین هر یک وجود ندارد.
حالت تاریک باعث کاهش مصرف انرژی صفحه نمایش و افزایش تمرکز می شود. برخی از کاربران همچنین اظهار داشتند که کاهش خستگی چشم را احساس می کنند ، اما این همان است س questionال شده است.
اخیراً ، ما یک الگوی بازاریابی ابری ایجاد کرده ایم که حالت تاریک را در کد خود گنجانده است که باعث می شود بخشهای ایمیل در هنگام مشاهده در یک سرویس گیرنده ایمیل ، به طور چشمگیری در تقابل باشند. این تلاشی است که ممکن است باعث افزایش جذابیت و نرخ کلیک مشترکان شما شود.
معمولاً پیشرفت هایی در فناوری ایمیل وجود ندارد ، بنابراین دیدن تصویب این تجربه در سراسر صنعت بسیار خوشایند است. درک بهترین روش ها ، کد برای پیاده سازی و همچنین پشتیبانی مشتری برای موفقیت در اجرای حالت تاریک حیاتی است. به همین دلیل ، تیم در Uplers این راهنما را منتشر کرد حالت ایمیل پشتیبانی از حالت تاریک.
کد ایمیل حالت تاریک
مرحله 1: برای فعال کردن حالت تاریک در کلاینت های فراداده ، فراداده را وارد کنید - اولین مرحله فعال کردن حالت تاریک در ایمیل برای مشترکانی است که تنظیمات حالت تاریک آنها روشن است. می توانید این کار را با قرار دادن این فراداده در برچسب زدن
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">مرحله 2: شامل سبک های حالت تاریک برایmedia (ترجیح می دهد طرح رنگ: تیره) - این پرس و جو رسانه را در جاسازی شده خود بنویسید tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com ، Outlook 2019 (macOS) و برنامه Outlook (iOS). اگر نمی خواهید یک آرم مشخص شده در ایمیل خود داشته باشید ، می توانید از کلاس های .dark-img و .light-img مانند تصویر زیر استفاده کنید.
@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; }
}مرحله 3: برای نسخه برداری از سبک های حالت تاریک از پیشوند [data-ogsc] استفاده کنید - این کدها را برای ایمیل در نظر بگیرید تا با حالت تاریک در برنامه Outlook برای 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; }مرحله 3: سبک های فقط حالت تاریک را در HTML بدنه قرار دهید - برچسب های HTML شما باید کلاس های مناسب حالت تاریک داشته باشند.
<!-- 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 -->ایمیل نکات حالت تاریک و منابع اضافی
من در حال کار بر روی Martech Zone خبرنامه های روزانه و هفتگی برای پشتیبانی از حالت تاریک ، حتماً اینجا مشترک شوید. همانند بیشتر برنامه نویسی های ایمیل ، این روند ساده ای نیست که به دلیل سرویس گیرنده های مختلف ایمیل و روش های کدگذاری اختصاصی آنها است. یک مسئله که با آن روبرو شدم موارد استثنا بود ... به عنوان مثال ، شما می خواهید متن سفید روی دکمه صرف نظر از حالت تاریک بخواهید. مقدار کد کمی مسخره است ... من باید موارد زیر را داشته باشم:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } برخی منابع اضافی:
- تورنسل - راهنمای نهایی برای حالت تاریک برای بازاریابان ایمیل.
- CampaignMonitor - راهنمای توسعه دهندگان برای حالت تاریک برای ایمیل.
مشاهده اینفوگرافیک تعاملی اپلرها
