آموزش برنامه نویسی
dark-mode-css-and-js1

قابلیت دارک مود وبسایت

استفاده از حالت دارک dark تو وبسایت باعث می‌شه کاربران بتونن بین حالت‌های مختلف براساس سلیقه و سازگاری با چشم یه گزینه انتخاب کنن

 تو این آموزش قصد داریم تا با استفاده از CSS و کمی هم Jquery قابلیت سوئیچ بین حالت دارک و لایت پیاده سازی کنیم.

 

۱. ایجاد ساختار فایل
یک فولدر ایجاد کنید و سه فایل خالی با سه پسوند مختلف .html  .css   .js  در آن قرار بدید و  یک فولدر images هم ایجاد کنید.

برای حالت تاریک قصد داریم از چند خط جی‌کوئری استفاده کنیم. برای افزودن جی‌کوئری به پروژه  شما می‌تونید از سایت جیکوئری فایل دانلود کنید و به فایل html اضافه کنید .

ساختار فایل به این شکل هست

 


- dark-mode-css/
      - images/
            - cake.jpg
      - index.html
      - script.js
      - style.css

۲. HTML
ابتدا یه ساختار html ساده پیاده سازی کردیم .
درون تگ بادی یه تگ دیو با کلاس سوییچ ایجاد کردیم برای تغییر بین حالت ها ایجاد کردیم

 درون تگ دیو یک تگ span  با کلاس inner-switch قرار دادیم

نکته : در آخر قبل از تگ body حتما تگ script قرار بدید.



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-۸">
    <meta name="viewport" content="width=device-width, initial-scale=۱.۰">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Demo | Dark Mode in CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body dir="rtl">
    <div class="switch">           
        <span class="inner-switch">OFF</span>
    </div>
    <h۱ class="title">ideJet.ir</h۱>
    <article>
        <h۱>idejet</h۱>
        <img src="./۱.png">
    </article>
    <script src="jquery-۳.۴.۱.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

۳. CSS
ابتدای کار کدهای CSS را برای حالت پیشفرض وبسایت یعنی حالت روشن ایجاد کردیم تو این کدها ما از Flexbox استفاده کرده‌ایم. این قابلیت به ما کمک می‌کنه تا بتونیم به شکلی راحت‌تر موقعیت المان‌های صفحه رو تغییر بدیم. کلاس .switch  که در کدها مشاهده میکنید یک کلاس سفارشیه که برای موقعیت دهی به دکمه سوئیچ استفاده می‌شه.




body {
    font-family: sans-serif;
    font-size: ۱.۱۲۵rem;
    display: flex;
    flex-direction: column;
    max-width: ۵۰rem;
    margin: ۰ auto;
    padding: ۰ ۰.۹۳۷۵rem;   
}
small {
    font-style: italic;
}
article {
    display: flex;
    flex-direction: column;
}
img {
    max-width: ۱۰۰%;
    display: block;
    align-self: center;
}
.switch {
    align-self: flex-end;
    margin: ۰.۹۳۷۵rem;
}
.inner-switch {
    display: inline-block;
    cursor: pointer;
    border: ۱px solid #۵۵۵;
    border-radius: ۱.۲۵rem;
    width: ۳.۱۲۵rem;
    text-align: center;
    font-size: ۱rem;
    padding: ۰.۱۸۷۵rem;
    margin-left: ۰.۳۱۲۵rem;
}

 

به تگ بادی دستور display: flex اضافه کردیم که این قابلیتو  بما می‌ده تا بتونیم از دستور align-self: flex-end; تو کلاس .switch استفاده کنیم

باعث می‌شه که کلاس .switch به صورت خودکار در سمت چپ بالا صفحه قرار بگیره

 

۴. پیاده‌سازی قابلیت سوئیچ در Jquery
فایل script.js باز میکنیم و قابلیت‌های سوئیچینگ اضافه کردیم قصد داریم  زمان کلیک روی دکمه  حالت dark  اعمال شه و متن دکمه به on تغییر کنه که برای حالت لایت هم  این اتفاق می‌افته



$( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
      $( "body" ).removeClass( "dark" );
      $( ".inner-switch" ).text( "OFF" );
    } else {
      $( "body" ).addClass( "dark" );
      $( ".inner-switch" ).text( "ON" );
    }
});





on(“click”, function() {…})

دستوری برای اعمال تابع روی یه دکمه یا یک المان دیگه هس. که از طریق یک کلاس می‌شه دریافت کرد.



hasClass()

 برای بررسی وجود کلاس .dark هست



removeClass()


کلاس dark رو زمانی که کاربر بخواد به حالت لایت برگرده حذف می‌کنه.



addClass()

 کلاس dark را برای زمانی که کاربر قصد سوئیچ به حالت تاریک  داشته باشه اضافه می‌کنه



text()


متنی رو روی دکمه سوئیچ قرار می‌ده

 
۵. افزودن دستورات CSS برای حالت تاریک
آخرین کاری که باید انجام بدیم استفاده از یکسری استایل برای کلاس .dark 
این استایل‌ها زمانی اعمال می‌شن که روی دکمه سوئیچینگ برای فعال سازی حالت dark کلیک شده باشه. برای اعمال استایل‌ها روی کلاس dark و تمام فرزندهای اون از یک سلکتور همگانی (*) استفاده کردیم
 



.dark,
.dark * {
    background-color: #۲۲۲;
    color: #e۶e۶e۶;
    border-color: #e۶e۶e۶;
}

این کدها رو باید به انتهای فایل CSS اضافه کنید.
 تا بدون مشکل انجام شه. از اونجایی که این کدها  پایین قرار گرفتند، override کردن استایل‌ها براشون مشکلی نداره

اگر پروژه‌ای دارید که حجم بیشتری داره و از پیچیدگی‌های بیشتری برخورداره پیشنهاد می‌کنم که تمام استایل‌های مربوط به قسمت dark تو یک فایل جداگانه به اسم dark.css قرار بدید.

و برای افزودن این فایل به صفحه HTML هم لینک رو تو یک خط بعد از فایل style.css باید قرار بدید

 

پیش نمایش کار ما به این شکل هست 

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

3 سال پیش
#آموزشی
برای ثبت نظر لطفا وارد سایت شوید.