نحوه ایجاد Night Mode ( حالت شب ) برای وب سایت

آیا علاقمند به یادگیری نحوه ایجاد یک حالت شب ( night mode ) ساده برای وب سایت خود هستید؟ در این مقاله از jQuery و Bootstrap 5 برای این منظور استفاده خواهیم کرد. البته می‌توانید از هر نسخه بوت استرپ استفاده کنید. همچنین می‌توانید از هر فریمورک دیگری بهره بگیرید یا استایل‌های CSS خود را برای حالت شب شخصی سازی کنید. پس بیایید شروع کنیم.

دانلود jQuery و Bootstrap

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

اگر نحوه کار با جی کوئری را نمی‌دانید، می‌توانید این آموزش را در وب سایت راکت دنبال کنید.

بوت استرپ را هم می‌توانید از اینجا دریافت کنید.

ایجاد فایل‌های موردنیاز

ابتدا باید پوشه‌ای به نام Night Mode ایجاد کرده و در آن، این فایل‌ها را اضافه کنید:

index.html
styles.css
nightmode.js

همچنین باید Bootstrap و jQuery را در این پوشه قرار دهید. مانند تصویر زیر:

پوشه‌های "css" و "js" فایل‌های بوت استرپ ما هستند.

افزودن فایل‌ها به پروژه

اکنون باید index.html را با یک ویرایشگر کد باز کنید. ما از vs code استفاده خواهیم کرد.

پس از باز کردن فایل HTML، باید این کدها را در index.html بنویسید:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark theme</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>

<body>

</body>

<script src="js/bootstrap.min.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="nightmode.js"></script>

</html>

همانطور که در اینجا مشاهده می‌کنید jQuery ،Bootstrap ، styles.css و nightmode.js را در این صفحه قرار دادیم.

ایجاد سوئیچ برای حالت شب ( night mode )

اکنون برای تغییر حالت شب به یک سوئیچ نیاز داریم. شما می‌توانید از هر نوع سوئیچ آماده‌ای استفاده کنید یا خودتان آن را طراحی کنید.

در Bootstrap 5 یک سوئیچ واقعا عالی وجود دارد که در اینجا از آن استفاده خواهیم کرد.

برای استفاده از سوئیچ Bootstrap 5 باید این کدها را بنویسید:

<div class="form-check form-switch">
    <input class="form-check-input" type="checkbox" id="nightModeSwitch">
    <label class="form-check-label" for="nightModeSwitch">Night Mode</label>
</div>

حال می‌خواهیم این سوئیچ را در وسط صفحه قرار دهیم و همچنین آن را با استایل دلخواه خودمان کمی بزرگتر کنیم، بنابراین این سوئیچ را در یک تگ "div" با کلاس "myContainer" قرار می‌دهیم. علاوه بر آن می‌خواهم نام خودم را زیر این سوییچ بنویسم.

فایل Index.html اکنون به شکل زیر است:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark theme</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<body>
    <div class="myContainer">
        <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" id="nightModeSwitch">
            <label class="form-check-label" for="nightModeSwitch">Night Mode</label>
        </div>
        <br>
        <h1>Created by Nima Owji</h1>
    </div>
</body>

<script src="js/bootstrap.min.js"></script>
<script src="jquery-3.5.1.min.js"></script>
<script src="nightmode.js"></script>

</html>

نوشتن استایل دلخواه خودتان در فایل styles.css

حالا باید استایل‌های خود را در "styles.css" بنویسیم. قبل از نوشتن استایل‌ها، صفحه ما به این صورت است:

اما می‌خواهیم آن را در وسط صفحه قرار دهیم و سوئیچ را کمی بزرگتر کنیم. بنابراین بیایید فایل "styles.css" را باز کنیم.

با قرار دادن آنها در مرکز صفحه شروع می‌کنیم. سپس باید این استایل‌ها را به بخش "myContainer" اختصاص دهیم:

.myContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    transition: 0.5s;
}

بعد از آن می‌خواهیم سوئیچ مورد نظر را کمی بزرگتر کنیم. بنابراین استایل‌ها را به کلاس ".form-check" که یکی از کلاس‌های بوت استرپ است اختصاص می‌دهیم.

.form-check {
    transform: scale(3);
}

اکنون صفحه ما به این شکل است:

همچنین می‌توانید یک افکت ترنزیشن را برای روان‌تر کردن آن اضافه کنید. مانند زیر:

.bg-dark,
.text-light {
    transition: 0.5s;
}

چگونه می‌توان صفحه را برای حالت شب ( night mode ) طراحی کرد؟

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

اگر هم از بوت استرپ استفاده نمی‌کنید، باید یک کلاس در CSS خود ایجاد کنید و برخی از استایل‌ها مانند "background-color: black;" و"color: white;" را به آن اختصاص دهید.

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

نوشتن کدهای جاوااسکریپت

خوب اکنون باید فایل "nightmode.js" را در ویرایشگر کد خود باز کنیم و این کدها را بنویسیم:

var nightModeSwitch = document.getElementById("nightModeSwitch");
var isNightModeEnabled = false;

nightModeSwitch.addEventListener("click", function() {

    isNightModeEnabled = nightModeSwitch.checked;

    $("*").toggleClass("bg-dark text-light");

});

در این کدها، سوئیچ خود را به متغیر "nightModeSwitch" اختصاص داده‌ایم و هر زمان که بخواهیم می‌توانیم به آن دسترسی پیدا کنیم.

پس از آن، یک متغیر بولی به نام "isNightModeEnabled" تعریف کردیم تا حالت شب را ذخیره کند. همچنین می‌توانید این متغیر را در کوکی ذخیره کرده و بررسی کنید که آیا کاربر قبلا آن را روشن کرده است یا خیر.

سپس رویداد "onclick" را به کلید حالت شب اضافه خواهیم کرد و مقدار سوئیچ را به متغیر "isNightModeEnabled" اختصاص خواهیم داد.

در ادامه کلاس‌های "bg-dark" و "text-light" را با استفاده از جی کوئری به تمام عناصر خود اضافه می‌کنیم. هنگامی که از "toggleClass" استفاده می‌کنیم، این کلاس‌ها را زمانی که عناصر نداشته باشند اضافه می‌کند و وقتی عناصر داشته باشند کلاس‌ها را حذف می‌کند.

اکنون کارمان تمام شده و حالت شب کامل است.

در نهایت اینگونه به نظر می‌رسد: