Cách tạo giao diện SÁNG TỐI website với Html, Css, Js

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é.

Đề xuất cho bạn

Subscribe
Notify of
guest

1 Comment
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Toancr SEO
8 months ago

thank ad, mình đã làm được

Tặng Ebook chia sẻ kinh nghiệm học lập trình web đi làm cho người mới bắt đầu!

Đây là tấm bản đồ chia sẻ lại cách học lập trình web đi làm đã giúp nhiều học trò của unitop kiếm được thu nhập từ 8-30tr mỗi tháng.

Ebook Bí quyết học lập trình web đi làm - Phan Văn Cương - Unitop.vn
1
0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x