آموزش ساخت حالت روشن/تاریک (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");
}
});
دموی برنامه حالت تاریک وب
لیست نظرات
سلام خسته نباشید , ببخشید چیکار کنیم که تگ a هم بک گراند و کالرش دارک بشه با این دکمه ؟
درود ، می تونید به این شکل عمل کنید که در فایل css تعریف کنید تگ a به دو روش
تاریک
.dark-mode a{color:white}و روشن.white-mode a{color:black}تعریف بشه .مطالب سایت خیلی عالی طراحی شده ممنونم از شما