خواندن ۴ دقیقه·۱ سال پیش

ساخت حالت شب با کمی جاوااسکریپت و css

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

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

اول از همه ایجاد اسکلت صفحه وب

اول از همه فایل index.html را ایجاد میکنیم و تگهای مورد نیاز خودم را به آن اضافه میکنم :

<!DOCTYE html>
<html>
     <head>
          <title>Dark Mode</title>
         <link href='style.css' rel='stylesheet' />
    </head>
    <body class='light'>
         <div id='wrapper'>
               <h1>DarkMode Web Page</h1>
              <p>press toggle darkMode button to enable/disable darkMode.</p>
             <button id='toggleDarkModeButton'>toggle darkMode</button>
         </div>
    </body>
    
    
</html>

در این بخش تاکنون کار خاصی نکردیم، فقط برای دکمه toggle مقدار id را مشخص کرده ایم. همچنین به تگ body کلاس پیشفرض light را داده ایم.

دلیل استفاده از single quoate در تگهای html ، محیط ویرگول است.

دوم گوشته برای صفحه وب

برای اینکه صفحه ما قابل تحمل شود فایل style.css خود را به آن اضافه میکنیم. ما ابتدا نیاز داریم که با متغییرها یا variable در css آشنا باشیم. خیلی راحت میتوان به شیوه زیر متغیر تعریف کرد.

:root {
      --varname:#0A0A0A;
}

مثلا برای رنگ 0A0A0A یک متغیر بنام varname تعریف کردیم و اکنون میتوانیم در فایلهای css خود از آن استفاده کنیم. مثلا اگر جایی میخواهیم رنگ نوشته را 0A0A0A بگذاریم بجای کد رنگ از متغیر آن استفاده میکنیم.

p {
    color: var(--varname);
}

یک متغیر تعریف و از آن استفاده کردیم. ما میتوانیم برای هر تگ دلخواه یک متغیر تعریف کنیم و این متغیر در تمام فرزندان آن تگ قابل استفاده است. مثلا اگر برای تگ body یک متغیر مثل کد زیر تعریف کنیم برای تمام فرزندان تگ body قابل استفاده است.

body {
      --color: #0000CC;
}
h1 {
    color: var(--color);
}

اکنون تگ h1 رنگ موجود در متغیر color را دریافت میکند.

میریم به سراغ فایل style.css و کار خودمان. ما دو حالت داریم یا darkMode یا lightMode برای هر حالت برای تگ body یک کلاس مشخص میکنیم. اگر darkMode بود تگ body کلاس dark را داشته باشد ولی اگر lightMode فعال بود این تگ کلاس light را داشته باشد. پس دو حالت داریم و در هر حالت یک کلاس به تگ body میبخشیم. همان طور که در فایل index.html مشخص کردیم حالت پیشفرض light mode است.

تفاوت حالت dark و light در رنگ نوشته‌ها و رنگ پس زمینه صفحه میباشد. پس کد زیر را به صفحه خود اضافه میکنیم :

.light{
     --backgroundColor:#F1F1F1;
     --textColor:#3A3A3A;
}

.dark{
    --backgroundColor:#2C2C2C;
   --textColor:#E622B5;
}

اگر حالت light بود رنگ پس زمینه و نوشته ها درون متغیر backgroundColor و textColor ذخیره میکنیم ولی اگر حالت night بود رنگهای دیگری را به این متغیرها نسبت میدهیم. دقت کنید این دو کلاس را برای تگ body در نظر گرفتیم.

ما درون فایل html خود تگ div با شناسه (id) wrapper را داریم که نیازمند دریافت رنگ پس زمینه است :

#wrapper{
      width: 600px;
     height: 400px;
     background: var(--backgroundColor);
     padding: 20px;
     transition: .5s all;
     margin: 100px auto;
}

خب با استفاده از متغیر backgroundColor اگر حالت night بود wrapper هم پس زمینه F1F1F1 را میگیرید ولی اگر حالت dark فعال بود wrapper هم پس زمینه 2C2C2C را به خود میگیرد. در قسمت بالاتر گفته شده که متغیرهای تگ body به تمام فرزندانش میرسد و مقدار این متغیر هم بستگی به نوع کلاس این تگ دارد.

برای رنگ نوشته ها هم به همین صورت میتوانیم از متغیر textColor استفاده کنیم :

#wrapper p ,
#wrapper h1{
      color: var(--textColor);
      transition: .5s all;
}

#wrapper button{
     background: #3498DB;
     border: none;
    color: #FDFDFD;
    padding: 14px 28px;
   cursor: pointer;
   border-radius: 5px;
}

با استفاده از ویژگی transition هم میتوانیم به تغییر رنگها در هنگام فعال یا غیر فعال‌سازی حال dark mode حالت انیمیشن‌گونه ببخشیم.

دمیدن روح به صفحه وب

تنها کاری که در قسمت جاوااسکریپت باید انجام دهیم این است : وقتی کاربر روی دکمه toggle کلیک کرد کلاس را برای تگ body تغییر دهد :


     var toggleDarkModeButton = document.getElementById('toggleDarkModeButton');
     toggleDarkModeButton.addEventListener('click', toggleDarkModeFunction);
    
      function toggleDarkModeFunction(){
            document.body.classList.toggle('dark');
           document.body.classList.toggle('light');
     }

به وسیله id دکمه را پیدا میکنیم و با addEventListener مشخص میکنیم وقتی کاربر روی دکمه click کرد تابع toggleDarkModeFunction اجرا شود. در این تابع هم اگر تگ body کلاس dark داشت آنرا حذف میکنیم ولی اگر نداشت به لیست کلاسهایش اضافه میکنیم. همچنین برای کلاس light هم همینطور!

البته میتوانیم تابع خود را بهتر هم کنیم ولی هدف آشنایی با روند کلی کار بود نه جزئیات!

برای استفاده در کتابخانه هایی مثل reactjs خیلی راحت یک state در کامپوننت تعریف کرد و با توجه به مقدارش به تگ root خود کلاس مناسب را ببخشیم.

ذخیره برای مراجعات بعدی

اکنون اگر صفحه توسط کاربر رفرش شود، دوباره وضعیت به حالت اول برمیگردد. برای اینکه موقعی که کاربر دوباره به صفحه ما مراجعه کرد بتوانیم با همان تنظیمات دلخواهش صفحه را به او نمایش دهیم از localstorage استفاده میکنیم.

همچنین برای مطالعه این پست و یا پستهای دیگر من، میتوانید به وبسایت من مراجعه کنید.

حالت شب night mode light mode جاوااسکریپت css

عباس باقری

برنامه نویس و طراح وب‌سایت

شاید از این پست‌ها خوشتان بیاید