تیاره حالت یوازې څو کاله دمخه پیل شوی و او نیولو وده ته دوام ورکوي. تور ټکی اوس د مایکس ، iOS او Android په اوږدو کې شتون لري او همدارنګه د مایکروسافټ آؤټ لوک ، سفاري ، ریډیډټ ، ټویټر ، یوټیوب ، جي مېل ، او ریډ ډیټ په ګډون کوربه اطلاعات. په هرصورت ، دلته تل بشپړ ملاتړ شتون نلري ، که څه هم.
تیاره حالت د سکرین انرژي کارول کموي او تمرکز زیاتوي. ځینې کاروونکي دا هم وايي چې دوی د سترګو فشار کې کمښت احساس کوي ، مګر دا دی پوښتنې شوې.
پدې وروستیو کې ، موږ د بازارموندنې بادل ټیمپلیټ رامینځته کړی چې په دې کوډ کې یې ډارک موډ شامل کړی چې واقعیا د بریښنالیک برخې په ډراماتیک ډول متضاد کوي کله چې په بریښنالیک مراجع کې لیدل کیږي. دا یوه هڅه ده چې کیدی شي ستاسو د پیرودونکو لپاره اضافي مصروفیت او د کلیک-થلو نرخونو ته وده ورکړي.
دا ډیری وختونه ندي چې د بریښنالیک ټیکنالوژۍ کې پرمختګونه شتون لري ، نو دا ښه ده چې په ټوله کې د دې تجربې غوره کول وګورئ. د غوره عملونو پیژندل ، د پلي کولو لپاره کوډ ، او همدارنګه د پیرودونکي ملاتړ ستاسو د تیاره حالت بریالي کولو لپاره مهم دی. د دې دلیل لپاره ، په اپلرز کې ټیم دا لارښود ته خپور کړ تیاره حالت بریښنالیک ملاتړ.
تیاره حالت بریښنالیک کوډ
مرحله 1: په بریښنالیک مراجعینو کې تیاره حالت فعالولو لپاره میټاټاټا شامل کړئ - لومړی ګام د پیرودونکو لپاره په بریښنالیک کې تیاره حالت فعالول دي چې د دوی تیاره حالت تنظیمات آن وي. تاسو کولی شئ په میټاټاټا کې شاملولو سره ټاګ
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">مرحله 2: د @ میډیا لپاره تیاره حالت سټایلونه شامل کړئ (د غوره - رنګ - سکیم: تیاره) - د دې رسنۍ پوښتنې په خپل ځای کې ولیکئ tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com ، آؤټ لک 2019 (ماکوس) ، او آؤټ لک ایپ (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] مختاړی وکاروئ - د بریښنالیک لپاره دا کوډونه شامل کړئ ترڅو د 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 د تیاره حالت ملاتړ لپاره ورځنۍ او اونيزې خبري اژانسونه ، ډاډه اوسئ دلته ګډون وکړئ. لکه څنګه چې د ډیری بریښنالیک کوډ کولو سره ، دا د مختلف بریښنالیک پیرودونکو او د دوی ملکیت کوډ کولو میتودونو له امله یو ساده پروسه نده. یوه مسله چې زه ورغلم هغه استثناوې وې ... د مثال په توګه ، تاسو په ت buttonۍ کې سپینې متن غواړئ پرته له تیاره حالت څخه. د کوډ مقدار یو څه خندونکی دی ... زه باید لاندې استثناوې ولرم:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } ځینې اضافي سرچینې:
- لیتوس - د بریښنالیک بازارمندانو لپاره تیاره حالت لپاره نهایی لارښود.
- د کمپاین څارونکی - پراختیا کونکي د بریښنالیک لپاره تیاره حالت ته لارښود کوي.
د اپلونکو تعامل انفرافیک وګورئ
