آموزش ساخت حالت روشن/تاریک (dark/light) با جاوا اسکریپت

آموزش ساخت حالت روشن/تاریک (dark/light) با جاوا اسکریپت

حالت dark با جاوا اسکریپت – امروزه استاندارد جدیدی به وبسایت ها و سیستم عامل ها اضافه شده که می توان پشت زمینه را به تاریک یا مشکی تغییر داد .

این قابلیت باعث می شود تا چشمان کاربر کمتر اذیت شود و تمرکز بیشتری بر روی مطلب داشته باشد .

فایل index ساختار dark mode

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

<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/main.css">
</head>

<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

        <div class="scheme">
            <span>تاریک</span>
            <label class="switch">
                <input type="checkbox">
                <span class="slider round"></span>
            </label>
            <span>روشن</span>
        </div>
        
    </div>



    <script src="static/js/app.js"></script>
</body>

</html>


css برنامه برای تغییر رنگ پشت زمینه و …

.dark-mode{
    background-color: #1b1b1b;
    color: rgb(230, 230, 13);
}

.scheme span{
    vertical-align: sub;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}


.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}


.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked+.slider {
    background-color: #2b2b2b;
}

input:focus+.slider {
    box-shadow: 0 0 1px #2b2b2b;
}

input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}



فایل app.js برای زمانی که روی switch کلیک شد کلاس dark را به body اضافه کند .

app.js کنترل رفتاریات dark mode

const bodyDOM = document.getElementsByTagName("body")[0];
const schemeDOM = document.querySelector(".switch input");
schemeDOM.addEventListener("change" , function(event){
    const thisElement = event.target;
    if(thisElement.checked){
        // Dark Mode
        bodyDOM.classList.add("dark-mode");
    }else{
        // Light Mode
        bodyDOM.classList.remove("dark-mode");
    }
});



دموی برنامه حالت تاریک وب

آموزش ساخت حالت روشن/تاریک (dark/light) با جاوا اسکریپت

دانلود برنامه حالت dark mode

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us