تعریفی از تم دارک (Dark Mode) و نحوه ایجاد آن در Web به کمک JS

حالت تاریک یا dark mode چیست؟

Dark mode یک رابط کاربری کم نور بوده که از رنگ تیره (معمولا سیاه) یا سایه های خاکستری به عنوان رنگ اصلی پس زمینه استفاده می‌کند. این تغییر زمینه از رابط کاربری سفید به سیاه که طراحان UI چند سالی است به آن متمایل شده اند در اصل پاسخی است به کاهش مصرف انرژی، کاهش خستگی چشم، جلوگیری از سردرد و به طور خلاصه بهبود تجربه کاربری!
البته نباید این موضوع را فراموش کرد که Dark mode واقعا طراحی جدیدی نیست چراکه اگر یادتان باشد یا در تصاویر قدیمی دیده باشید در دهه ۹۰ میلادی کامپیوترها پس زمینه سیاه و نوشته ها و کدهایی به رنگ سبز داشتند و در اصل دارک مود، ادامه دهنده مکتب قدیمی و تک رنگ رایانه های نسل اول است.

مزایای استفاده از حالت Dark mode

جلوگیری از سندرم بینایی رایانه ای!

دارک مود اگر به طور استاندارد پیاده سازی شود در مصرف انرژی دستگاه شما به شکل قابل توجهی صرفه جویی می‌کند و جدا از آن، از خستگی چشم شما نیز (مخصوصا در محیط های کم نور) جلوگیری می‌کند.
طبق مطالعات انجام شده، حالت تاریک می‌تواند از ابتلاء به سندرم بینایی رایانه ای یا CVS که شامل دردچشم، تاری دید، دوبینی، سردرد، گردن درد و حتی کمر درد می‌شود، جلوگیری کرده و به شما این امکان را می‌دهد تا بتوانید زمان بیشتری را به کار و استفاده از وسیله دیجیتال خود اختصاص دهید.

بهبود دید در نور کم

احتمالا برای همه ما پیش آمده که خواب باشیم و فردی چراغ اتاق را (از قصد!) روشن کند. پس از آن چه اتفاقی برای ما افتاد؟ سردرد گرفتیم!
این موضوع دقیقا درمورد افرادی که اواخر شب یا اوایل صبح به صفحه رایانه یا تلفن همراه خود خیره می‌شوند نیز کاملا صدق می‌کند. Dark mode با کاهش نور شدید، دیدن تصاویر و مطالعه مطالب را بدون سردرد برای شما به ارمغان می‌آورد.

عمر باطری شما را افزایش می دهد

برخی وسایل دیجیتال که از صفحه نمایش OLED استفاده می‌کنند می‌‌توانند پیکسل های سیاه را در صورت عدم استفاده خاموش کنند. Dark mode به صورت کلی از تعداد بیشتری پیکسل سیاه استفاده می‌کند و بدین طریق دستگاه را مجبور می‌کند تا انرژی کمتری مصرف کند.

تمرکز شما را هنگام کار افزایش می‌دهد

به صورت کلی نورسفید و رنگ های روشن موجب کاهش توجه شما می‌شود و همین موضوع در بلند مدت (مثلا وقتی برای چند ساعت می‌خواهید با لپ تاپ خود کار کنید) برای شما آزار دهنده خواهد بود. Dark mode UI با حذف زمینه و جلب توجه شما به محتوای اصلی، بازده و تمرکز شما را بهبود می بخشد.

نکات منفی در استفاده از Dark mode

مانند تمام چیزهایی که ما در زندگی با آن روبرو می‌شویم حالت تاریک نیز در کنار مزایای جالب و مفید معایبی نیز با خود به همراه دارد که در ادامه به بررسی آن خواهیم پرداخت.

کاهش ارتباط عاطفی با کاربر

نمی توان این موضوع را کتمان کرد که رنگ های روشن می‌توانند احساسات درخشانی در کاربر ایجاد کنند. اما این موضوع چرا باید یک مزیت منفی بزرگ باشد؟
این موضوع به میزان زیادی به جامعه هدف و نوع کسب و کارشما ارتباط دارد. یعنی چه؟
برفرض اگر برند و کسب و کار شما ماهیت انگیزشی، الهام بخشی، موفقیت و … دارد بدین معنی ست که شما برای نفوذ و افزایش تاثیر محتوای خود نیاز به برقراری یک رابطه عاطفی با کاربر دارید و حالت تیره می تواند شما را به میزان قابل توجهی از برقراری این ارتباط دور کند.

فضا را کوچک می‌‌کند

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

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

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

به طور کلی حتما بایستی داخل سایت های مختلف ویژگی Dark Mode رو دیده باشید. دکمه ای برای تغییر تم سایت. قرار هست با هم یاد بگیریم چطور میشود یک دکمه Dark/Light Mode بسازیم …

اول از همه داخل فایل html خودتان یک دکمه (button) بسازید :

<button on‌click=”darkmode()”>mode</button>

داخل قطعه کد بالا اسم تابع رو Darkmode قرار دادیم و شما میتوانید هر چی که تمایل دارید بزارید اما بهتر هست به موضوع مربوط باشد تا اشتباه نشود.

حال وارد بخش جاوااسکریپت میشویم…، البته میتوانستیم کل قطعه کد هارو داخل همان on‌‌‌‌click بنویسیم اما چون قرار هست مبحث بهتر متوجه شویم کاملا جدا مینویسیم.

تو بخش جاوااسکریپت کد زیر رو بنویسید :

} ()function darkmode
;document.body.classList.toggle(“dark”)
{

ههانطور که در کد بالا مشاهده میکنید تابعی که برای دکمه هست قرار داده شده است و داخل آن کلاسی با نام dark برای body تعریف کرده ایم..

حال رسیدیم به بخش css، کد خاصی ندارد و فقط کافیست شما کلاسی که داخل جاوااسکریپت تعریف کرده اید را اینجا تعریف کنید و رنگ بک گراند (BackGround) را سیاه (Black) قرار بدید:

} dark.
;background-color: black
{

همچنین میتوانید به بخش body خودتان transition بدهید تا ناگهانی فضا dark نشود …

قطعه کد زیر یک DarkMode ساده هست که در مجموع کد ها به شکل زیر هستند :

<DOCTYPE html!>
<html>
<head>
<style>
} dark.
;background-color: black
{
<style/>
<head/>
<body>
<button on‌click=”darkmode()”>mode</button>
<script >
} ()function darkmode
document.body.classList.toggle(“dark”)
{
<script/>
<body/>
<html/>

همچنین دنبال کنید تعریف کلی از رویداد ها Events و بررسی عملی رویداد onclick در JS، کلیک کنید.