ایجاد دکمه حالت تیره (دارک مود) با جاوا اسکریپت

487

0

تصویر شاخص آموزش ایجاد دکمه حالت تیره یا دارک مود

این پست بخشی از مسیر متخصص HTML است. اگر به این مسیر علاقه مندید اینجا کلیک کنید.

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

احتمالا در بسیاری از سایت ها دکمه ای را با عنوان دارک مود دیده اید. دکمه Dark mode یک حالتی است که بعضی از سایت ها در اختیار کاربران خود می گذارند و کاربران می توانند سایت آنها را با حالت تیره مشاهده کنند. در گذشته نیز نحوه ی درست کردن دکمه ی شب و روز برای سایت را آموزش دادیم. اما امروز این آموزش را ساده تر برایتان آماده کرده ایم. شما می توانید از هر کدام را که می پسندید استفاده کنید. بسیاری از افراد با رنگ تیره بیشتر ارتباط برقرار می کنند همچنین برخی با نگاه کردن به مانیتورها چشم هایشان خسته می شود. بنابراین این افراد از حالت دارک مود استفاده می کنند. شما با قرار دادن حالت دارک مود در سایت خود می توانید از خسته شدن زودهنگام چشمان کاربرانتان جلوگیری کنید. در این آموزش می خواهیم ایجاد دکمه حالت تیره را آموزش دهیم.

نحوه ایجاد دکمه dark mode

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

پیاده سازی حالت تیره سایت یا حالت شب

در بخش کدهای HTML نیاز به یک دکمه داریم. سپس به استایل دهی برای دوحالت روشن و تیره در قسمت استایل های CSS می پردازیم. در نهایت یک تایع جاوااسکریپت نیاز داریم. پس از تعریف این تابع با کلیک بر روی دکمه حالت تیره، صفحه سایت به حالت تیره یا حالت شب تبدیل می شود.

کدهای HTML به صورت زیر خواهد بود:

<h2>حالت شب/روز</h2>
<p>بر روی دکمه زیر کلیک کنید!</p>

<button onclick="myFunction()">تغییر حالت</button>

با کلیک بر روی این دکمه، تابع myFunction اجرا خواهد شد که در ادامه پیاده سازی خواهیم کرد.

در قسمت استایل و در فایل style.css موارد زیر را نیاز داریم:

body {
  padding: 25px;
  text-align:center;
  background-color: white;
  color: black;
  font-size: 25px;
  direction:rtl;
}

.dark-mode {
  background-color: black;
  color: white;
}

فراموش نکنید که کد های CSS خود را بین تگ باز و بسته style قرار دهید و یا اگر از فایل جانبی استفاده می کنید فایل CSS را به کمک تگ link به فایل HTML خود متصل کنید.

در حالت عادی پس زمینه صفحه سفید می باشد و متن ها به رنگ مشکی هستند. کلاس dark-mode را که در CSS کد نویسی کرده بودیم برای استایل های حالت تیره استفاده خواهیم کرد. در نهایت می خواهیم که متن ها به رنگ سفید و پس زمینه رنگ مشکی داشته باشد.

حالت روشن

خروجی آموزش ایجاد دکمه حالت تیره به این شکل خواهد بود. شما میتواندی استایل های دیگری به دکمه یا متن های خود بدهید. با کلیک بر روی دکمه تغییر حالت اتفاق خاصی نمی افتاد. زیرا هنوز تابع myfunction را ایجاد نکرده ایم. در قسمت کدهای HTML و پیش از بسته شدن تگ body کدهای مربوط به تابع myfunction را درون تگ script قرار می دهیم.

کدهای HTML ما به شکل زیر خواهد شد:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/style.css">

</head>
<body>

<h2>حالت شب/روز</h2>
<p>بر روی دکمه زیر کلیک کنید!</p>

<button onclick="myFunction()">تغییر حالت</button>
<script>
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>
</body>
</html>

تابع myfunction که ایجاد کرده ایم وظیفه اش این است که با کلیک بر روی دکمه، محتواهای کلاس dark-mode را به body اعمال میکند.

خروجی کار به صورت زیر خواهد بود:

آموزش ایجاد دکمه حالت تیره یا دارک مود(darkmode)

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

مهندس محسن صادق نژاد

دبیر | مهندس نرم افزار دانشگاه شهید رجایی

3سال در کنار تاتژن

guest
0 Comments
Inline Feedbacks
View all comments