بعد از یه مدت طولانی سلام. خیلی وقت بود نبودم و متاسفانه مشغله های کاری خیلی خیلی وقتم رو گرفته بود. امروز کمی آزاد تر بودم و گفتم براتون یه قابلیت جالب بنویسم.
همیشه کاربران (اللخصوص برنامه نویسان) به دو دسته تقسیم می‌شدند! کاربرانی که طیف رنگی تاریک دوست دارند و بلعکس.
در یک تغییر خیلی جذاب هم، قابلیت دارک مود به سیستم عامل های Windows 10 و MacOs Mojave اضافه شد.
خب چه خوب میشد که اگر وبسایت های ما هم به خواسته و سلیقه کاربرامون توجه میکردند و نسخه دارک مود و لایت مود داشتند!
خیلی خب Good News!!! این امکان وجود داره و ما میتونیم تشخیص بدیم که کاربر لایت/دارک مود دوست داره که سایت براش به نمایش در بیاد.
پیش از این هم این امکان وجود داشت با جاوا اسکریپت اما کاربر باید خودش با یک تاگل انتخاب میکرد و یا بر اساس ساعت شبانه روز و مواردی مثل اینها.
اما قرار هست امروز در رابطه با یک Media Query از CSS صحبت کنیم :)
شما میتونید خیلی راحت با استفاده از prefers-color-scheme این قابلیت رو به CSS پوسته خودتون اضافه کنید.
این property سه مدل value میگیره که عبارتند از dark ، light و no-preference که فکر نمیکنم نیاز به توضیح داشته باشه :دی
نحوه استفاده هم که خیلی ساده هست. نمونه:
.box{color: black;background: white;}
@media (prefers-color-scheme: dark) {.box{color: white;background: black;}}
خداییش من خودم فکر نمیکردم انقدر ساده باشه ها :دی
برید و UX وبسایت هاتون رو منفجر کنید و به کاربراتون یه حال اساسی بدید ;-)
