دارک مود خودکار وبسایت، سازگار با iOS 13 و MacOS Mojave

دارک مود یا حالت تیره یا حالت شب، موضوعی بحث بر انگیز این روز های دنیای دیجیتال به حساب میاد، بطوریکه سیستم عامل ها و اپلیکیشن های پرکاربرد که به دارک مود مجهز میشن یه موج خبری به پا میشه و اضافه نکردن این فیچر جالب و کاربردی به محصول یه جور ظلمه!

دارک مود
دارک مود

خب بیخیال مقدمه چینی، بریم سر اصل مطلب. یه موضوع جالب توجه که توی iOS 13 و MacOS Mojave وجود داره (و طبعا تو نسخه های بعدی این سیستم عامل ها وجود خواهد داشت) دارک مود هست، دارک مودی که پس از فعالسازی علاوه بر تغییر رنگ UI سیستم عامل و بخش های مختلف آن، رنگ های برخی وبسایت ها هم تغییر میده. سوالی که پیش میاد اینه که آیا رنگ های وبسایت ها برعکس میشن یا اصلا بر اساس چه منطق و الگوریتمی رنگ وبسایت ها تغییر میکنه؟


خب مشخصه که رنگ ها برعکس نمیشن و منطق خاصی برای تغییر رنگ وجود نداره! سال گذشته قبل رونمایی از MacOS Mojave وبسایت W3C پیشنویس prefers-color-scheme را به وبسایت خود اضافه کرد که توسط سافاری ۱۲.۱ به بعد، کروم ۷۶ به بعد و فایرفاکس ۶۷ به بعد پشتیبانی میشه. از اونجا که تو iOS 13 حالت تاریک (دارک مود) وجود داره، سافاری موبایل هم از iOS 13 به بعد از این selector پشتیبانی میکنه.

مقادیر موجود برای سلکتور prefers-color-scheme:

  • no-preference

اگر دیوایس از حالت های زیر پشتیبانی نکنه یا کاربر انتخابی انجام نده مقدار پیشفرض است.

  • light: the user has chosen a light theme

کاربر نسخه روشن رو انتخاب کنه. (حالت عادی)

  • dark: the user has chosen a dark theme

کاربر نسخه تیره رو انتخاب کنه. (حالت دارک مود)

برای مثال اگر وبسایت شما بطور پیشفرض روی نسخه روشن باشد و بخواهید نسخه تیره آنرا تعیین کنید باید از قطعه کد زیر استفاده کنید:

@media (prefers-color-scheme: dark) {
body {
    color: #fff;
    background: #000;
}
}

منطقا برای نسخه روشن باید بجای dark عبارت light رو استفاده کنید و برای زمانیکه دیوایس از دو حالت قبل پشتیبانی نمیکنه یا کاربر انتخابی انجام نداده no-preference رو جایگزین کنید.

نمونه ای از دارک مود خودکار
نمونه ای از دارک مود خودکار

امیدوارم مطلب واستون مفید بوده باشه. نسخه live دارک مود خودکار رو میتونید تو وبسایت فراسیب مشاهده کنید. نکته جالبی که وجود داره در سافاری تنها با فعال کردن دارک مود دیوایس، تغییرات مربوط به دارک مود وبسایت رو بدون نیاز به رفرش میتونید ببینید D:

همچنین جا داره به سایت های مشابه‌مون که میلیونی خرج کردن این فیچر ساده رو دست و پا شکسته بذارن رو سایتشون تبریک بگم =))))