Tạo nút chuyển đổi chế độ sáng tối của website nếu đây là thứ bạn cần thì trong nội dung bài viết này bạn sẽ được tôi chia sẻ cách làm chi tiết(kèm cả video).
Video hướng dẫn tạo nút thay đổi chế độ sáng tối website.
Bên dưới là video tôi chia sẻ chi tiết cách để tạo ra một Switch Toggle đẹp và sử dụng javascript để chuyển đổi chế độ sáng tối của website.
Nó có khá nhiều tư duy nên bạn xem video kết hợp có code ở phần bên dưới để thực hành cho tối ưu nhé.
Mã nguồn code xây dựng chế độ sáng tối của website
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Switch Toggle Button</title>
</head>
<body>
<style>
:root{
--transition-effect: 0.25s cubic-bezier(.25,-0.59,.82,1.66) .3s;
}
body{
background: #fff;
transition: var(--transition-effect);
}
body.dark{
background: #111;
}
#wrapper{
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
}
.switch-toggle{
width: 90px;
height: 50px;
appearance: none;
background: #83d8ff;
border-radius: 26px;
position: relative;
cursor: pointer;
box-shadow: inset 0px 0px 16px rgba(0, 0, 0, .3);
transition: var(--transition-effect);
}
.switch-toggle::before{
content: "";
width: 44px;
height: 44px;
position: absolute;
top: 3px;
left: 3px;
background: #efe2bf;
border-radius: 50%;
box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
transition: var(--transition-effect);
}
.switch-toggle:checked{
background: #749dd6;
}
.switch-toggle:checked:before{
left: 40px;
}
</style>
<div id="wrapper">
<input type="checkbox" name="" class="switch-toggle" id="light-dark">
</div>
<script>
var checkbox_toggle = document.getElementById('light-dark');
checkbox_toggle.addEventListener('change', function(){
// THêm class dark cho body
document.body.classList.toggle('dark');
});
</script>
</body>
</html>
Những kiến thức trong phần này khá nâng cao nên nếu bạn đang không hiểu video đang nói gì và đang hoang mang trên hành trình học lập trình web của mình thì bạn có thể truy cập https://unitop.vn để xem lộ trình học để đi làm sau 3-5 tháng nhé.
thank ad, mình đã làm được