نسخه تاریک وب سایت؛ اضافه کردن دارک مود به صفحات وب

در این ویدیو ابتدا حالت مورد نظر کاربر را تشخیص و سپس با اضافه کردن نسخه تاریک وب سایت (Dark Mode) سعی در بهبود تجربه کاربری داریم.

حالت تاریک یا دارک مود یکی از تغییرات جذاب سال های اخیر در اپلیکیشن ها و وب سایت ها است. در این حالت با انتخاب رنگ های تیره در بخش های اصلی، استایل کلی تیره ای را می سازیم. دلایل مختلفی برای استفاده از dark mode وجود دارد. برای مثال چشم برخی افراد در بلند مدت با نور و رنگ های روشن خسته می شود. این نکته بیشتر در برنامه نویسان که باید ساعت های زیادی را در نرم افزار های توسعه سپری کنند، دیده می شود.

روش های مختلفی برای پیاده سازی نسخه تاریک وب سایت وجود دارد. اما ساده ترین روش استفاده از چند خط کد ساده CSS است.

تشخیص تم مورد نظر کاربر

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

body {
  background-color: white;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
  }
}

با استفاده از کد بالا، با تعریف رنگ برای هر دو حالت تیره و روشن، هر دو حالت را بر روی وب سایت خواهیم داشت. روش اصولی استفاده از متغیر ها برای تمام رنگ های وب سایت است. با تعریف متغیر می توانیم تنها با نوشتن مقادیر جدید در قسمت dark، حالت تاریک وب سایت را ایجاد کنیم. برای مثال:

:root {
  --background: withe;
  --accent: darkcyan;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: black;
    --accent: cyan;
  }
}

مزیت اصلی این روش نسبت به نوشتن کد های سی اساس معمولی، سادگی در پیاده سازی آن است.

نسخه تاریک وب سایت خودکار

اعمال تغییرات در تمام رنگ ها برای ایجاد حالت تیره زمان بر خواهد بود. برای این کار می توان از فیلتر های CSS استفاده کرد. با استفاده از دو فیلتر invert و hue-rotate رنگ و نور به صورت خودکار تغییر می کند. برای این کار از کد زیر در قسمت مورد نظر استفاده می کنیم:

filter: invert(1) hue-rotate(180deg);

با این کد تمام رنگ ها را برعکس می کنیم. در نتیجه رنگ های روشن اصلی سایت به صورت تیره تغییر می کنند. با این تکنیک ساده نسخه تاریک وب سایت به صورت خودکار ساخته می شود.