پیاده سازی dark mode (حالت شب) در یک صفحه ی ساده

Dark Mode in CSS

0 363

یکی از قابلیت های محبوب این روزها در طراحی UI اضافه کردن dark mode (حالت شب) است. این قابلیت در بسیاری از نرم افزارها و وب سایت های معروف (مانند تلگرام، توییتر، Reddit و …) دیده می شود. دلیل آن هم راحت تر بودن مطالعه ی متون در این حالت است. بر اساس برخی از تحقیقات آکادمیک انجام شده میزان خستگی و قرمزی چشم ها در حالت dark mode کم تر از حالت عادی (صفحات رنگ روشن) بوده است، مخصوصا در محیط های تاریک (مثلا در شب). روش های مختلفی برای پیاده سازی Dark Mode با CSS در صفحات شما وجود دارد و ما هم یکی از این روش ها را در یک صفحه ی ساده پیاده سازی کرده ایم:

حالت عادی صفحه (بدون Dark Mode)
حالت عادی صفحه (بدون Dark Mode)
همان صفحه با حالت Dark Mode
همان صفحه با حالت Dark Mode

آماده سازی HTML

برای پیاده سازی این طرح یک پوشه ایجاد کردیم و سه فایل زیر را در آن ایجاد کرده ایم:

  • html
  • css
  • js

سپس یک پوشه ی دیگر به نام images ایجاد کرده و تصویر کیک را در آن قرار دادیم. از آنجایی که می خواهیم در این مثال از جی کوئری استفاده کنیم، آن را مستقیما از CDN وارد صفحه کرده ایم تا همیشه روی آخرین نسخه باشد اما اگر بخواهید می توانید جی کوئری را دانلود کرده و به صورت محلی استفاده کنید. ساختار کلی صفحه ی ما (به صورت خلاصه شده) باید به این شکل باشد:

برای شروع باید روی فایل HTML کار کنیم. بنابراین پس از اضافه کردن CDN مربوط به جی کوئری و موارد دیگر (مانند فایل استایل و …) یک تگ h1 برای عنوان مطلب خود قرار می دهیم. سپس از تگ معنا-محور <article> استفاده کرده ایم تا محتوای مقاله را درون آن قرار دهیم. مثل همیشه صفحه ی استایل های ما در تگ <head> اضافه می شود اما فایل های جاوا اسکریپت در قسمت انتهایی سند و قبل از تگ پایانی <body/> قرار داده می شوند.

نکته: ترتیب بارگذاری فایل های جی کوئری و اسکریپت جاوا اسکریپت (فایل شخصی خودمان) مهم است. اگر جی کوئری قبل از فایل جاوا اسکریپت خودمان بارگذاری نشود، فایل جاوا اسکریپت ما نمی تواند از قابلیت های آن استفاده کند.

محتوای فایل HTML ما به شکل زیر است:

آماده سازی CSS

از آنجا که حالت روشن حالت پیش فرض صفحات است، ابتدا استایل های حالت روشن را می نویسیم. در کدهای CSS زیر از مدل flexbox استفاده کرده ایم و محتوا را به صورت ستونی چیده ایم. با استفاده از همین مدل، کلاس switch. (که به عنوان wrapper دکمه ی حالت شب است) و تصویر کیک را در وسط عنصر نگهدارنده‌شان قرار داده ایم. محتوای فایل CSS ما بدین شکل است:

استفاده از display: flex به ما کمک کرده است تا بتوانیم از align-self: flex-end برای دکمه ی حالت شب استفاده کنیم و دکمه را در قسمت بالا و سمت راست صفحه قرار دهیم. همچنین استفاده از flex-direction: column به ما کمک می کند که بتوانیم تگ <article> را به همراه تصویرش در وسط صفحه قرار دهیم.

آماده سازی جاوا اسکریپت

وظیفه ی فایل script.js (که حاوی کدهای جاوا اسکریپت ما است) عملیاتی کردن دکمه ی حالت شب است. در حالت عادی این دکمه هیچ کاری انجام نمی دهد بنابراین باید عملکردی به آن بدهیم. باید کاری کنیم که با کلیک روی این دکمه مقدار آن به ON تغییر پیدا کرده و کلاس خاص CSS مربوط به حالت شب هم روی صفحه اعمال شود. بنابراین:

قسمت (on(“click”, function یک eventlistener ساده است که هنگام کلیک شدن روی عنصر خاص تابع خاصی را اجرا می کند. hasClass نیز بررسی می کند که آیا کلاس dark. روی صفحه اعمال شده است یا خیر. سپس removeClass در هنگام کلیک روی دکمه، حالت شب را با حذف کلاس dark از بین می برد. تابع addClass نیز دقیقا برعکس removeClass عمل کرده و کلاس dark را به صفحه اضافه می کند. در آخر تابع text مقدار متنی کلید را از ON به OFF و بالعکس تغییر می دهد.

آماده سازی حالت شب

آخرین کاری که باید انجام دهیم اضافه کردن کلاس dark. به استایل هایمان است:

همانطور که می دانید نام علامت ستاره (*) universal CSS selector است و در کد بالا می گوید تمام فرزندان کلاس dark را نیز انتخاب کن. به خاطر ماهیت آبشاری بودن CSS باید این کلاس را پایین تر از تمام کلاس های دیگر قرار دهیم تا بتوانیم رنگ های عادی در حالت روشن را override کنیم.

نکته: اگر پروژه ی شما پروژه ی بزرگی است می توانید یک فایل جداگانه به نام dark.css ایجاد کنید و آن را بعد از استایل های عادی خود در قسمت head فایل HTML بارگذاری کنید.

مشاهده ی پروژه ی نهایی و تکمیل شده

شاید قبلا تصور می کردید که طراحی حالت شب بسیار پیچیده باشد اما حقیقت این است که طراحی حالت شب چیزی به جز اضافه کردن چند کلاس CSS نیست. حتی اگر پروژه ی شما بسیار بزرگ باشد و عناصر مختلفی داشته باشد می توانید به راحتی و با ساختن یک فایل css جداگانه در طی چند جلسه کدنویسی حالت شب را برای سایت خود طراحی کنید. هر چقدر که وسعت پروژه ی شما زیاد باشد، منطق کدنویسی آن به همین شکل است. حتی اگر از فریم ورک هایی مانند vue و react استفاده می کنید به راحتی می توان منطق جاوا اسکریپتی بالا را در آن ها نیز پیاده کرد. امیدوارم این مقاله به شما کمک کرده باشد.

ارسال نظر

توجه:‌ آدرس ایمیل شما منتشر نخواهد شد.