حالت تاریک برای ایمیل در حال پذیرش است... در اینجا نحوه پشتیبانی از آن آورده شده است
حالت تاریک مصرف انرژی صفحه نمایش را کاهش می دهد و فوکوس را افزایش می دهد. برخی از کاربران همچنین اظهار میکنند که فشار چشم کاهش یافته را احساس میکنند، اما اینطور است س questionال شده است.
پذیرش حالت تاریک همچنان در حال رشد است. حالت تاریک اکنون در macOS، iOS، Android و مجموعهای از برنامهها از جمله Microsoft Outlook، Safari، Reddit، Twitter، YouTube، Gmail و Reddit در دسترس است. با این حال، همیشه پشتیبانی کامل از هر یک وجود ندارد. معمولاً پیشرفتهایی در فناوری ایمیل وجود ندارد، بنابراین دیدن پشتیبانی از حالت تاریک در ایمیل نیز خوب است.
در آگوست 28 شاهد 2021 درصد از کاربرانی بودیم که در حالت تاریک مشاهده کردند. تا اوت 2022، این تعداد به نزدیک به 34 درصد افزایش یافت.
تورنسل
درک بهترین شیوه ها، کد برای پیاده سازی، و پشتیبانی مشتری برای موفقیت شما در اجرای حالت تاریک بسیار مهم است. به همین دلیل، تیم Uplers این راهنمای حالت تاریک را منتشر کرد پشتیبانی ایمیل.
به تازگی، DK New Media یک الگوی Salesforce Marketing Cloud را برای مشتری ایجاد کرد که حالت تاریک را در خود جای داده بود و بخشهای ایمیل را وقتی در یک کلاینت ایمیل مشاهده میشد، به شدت متضاد میکرد. این تلاشی است که ممکن است باعث تعامل بیشتر و نرخ کلیک برای مشترکین شما شود.
کد ایمیل حالت تاریک
مرحله 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 App (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 – راهنمای توسعه دهنده برای حالت تاریک برای ایمیل.
اگر میخواهید قالبهای ایمیل شما برای پشتیبانی از حالت تاریک تبدیل شوند، در تماس با آن درنگ نکنید DK New Media.