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

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Gỡ triệt để phần mềm Visual Studio Code

Gỡ triệt để phần mềm VSC 1. Mở thư mục cài đặt VSC C:\Users\Name\AppData\Local\Programs\Microsoft VS CodeClick uninstoo.exe để gỡ phần mềm 2. Xoá thư mục

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng

0
Bạn đang nghĩ gì? Hãy để lại bình luận tại đâyx
()
x