Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Hướng dẫn chèn nút toggle switch dark mode cho Blog

                    Nút toggle switch là cài đặt cho phép người dùng tác động chuyển đổi giao diện hiển thị của Blog từ chế độ sáng sang chế độ tối hay chế độ ban đêm. Toggle switch thường rất hay được sử dụng cho các theme có chủ đề video. Tùy theo mỗi theme mà có cách chèn khác nhau sao cho phù hợp, nhưng chung quy lại bạn cứ hiểu toggle switch dark mode là chuyển đổi giao diện từ sáng sang tối.

                    Các bạn xem demo tại: https://viettubenet.blogspot.com/

                    Phương pháp thực hiện bao gồm 3 bước: Chèn nút toggle switch vào vị trí thích hợp, Tạo viết css tạo giao diện cho nút toggle switch và viết script chuyển đổi giao diện khi tác động vào nút

                    Bước 1: Chèn nút toggle switch vào vị trí thích hợp:

                    Copy
                    <label class='switch'>
                      <input type='checkbox'/>
                      <span class='toggle-light slider'/>
                    </label>

                    Bước 2: Viết css tạo giao diện cho nút toggle switch

                    Trên mạng có rất nhiều hướng dẫn về css cho nút toggle switch rất nhiều style đẹp mắt tùy vào sở thích của mỗi bạn mà lựa chọn cho phù hợp, dưới đây mình đưa css tham khảo

                    Copy
                    
                    .switch {
                        position: relative;
                        display: inline-block;
                        width: 40px;
                        height: 16px;
                    }
                    .switch input {
                        opacity: 0;
                        width: 0;
                        height: 0;
                        outline: 0;
                    }
                    .slider {
                        position: absolute;
                        cursor: pointer;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        background-color: #ddd;
                        -webkit-transiton: .4s;
                        transition: .4s;
                        border-radius: 34px;
                    }
                    .slider.checked {
                        background-color: #3c4043;
                    }
                    .slider:before {
                        position: absolute;
                        content: "";
                        height: 20px;
                        width: 20px;
                        left: 0;
                        bottom: -2px;
                        background-color: #aaa;
                        box-shadow: 0 0 1px #aaa;
                        -webkit-transition: .4s;
                        transition: .4s;
                        border-radius: 50%;
                    }
                    .slider.checked:before {
                        -webkit-transform: translateX(20px);
                        -ms-transform: translateX(20px);
                        transform: translateX(20px);
                        background-color: #2196F3;
                        box-shadow: 0 0 1px #2196F3;
                    }

                    Phần quan trọng viết css chuyển đổi giao diện từ sáng sang tối, các bạn sử dụng mẹo thế này cho đơn giản vì tùy theo mỗi theme không áp dụng được quy tắc chung được. Giả sử bạn có:

                    Copy
                    
                    body {
                        background-color: #f0f1f5;
                        color: #3c4043;
                    }

                    thì ngay dưới nó bạn viết thêm:

                    Copy
                    
                    body.night-mode {
                        background-color: #282828;
                        color: #ffffff;
                    }

                    Ngoài ra bạn quy định màu chung cho thẻ tag a là

                    Copy
                    
                    a {
                        color:#3c4043;
                    }

                    thì ngay dưới nó bạn viết thêm:

                    Copy
                    
                    .night-mode a {
                        color:#ffffff;
                    }

                    Ngoài ra bạn còn có các thẻ div khác ví dụ

                    Copy
                    
                    .main-wrapper .widget {
                        background-color: #ffffff;
                    }

                    và khi chuyển đổi bạn viết css thành

                    Copy
                    
                    .night-mode .main-wrapper .widget {
                        background-color: #3c4043;
                    }

                    Bước 2: Viết script chuyển đổi giao diện khi tác động vào nút

                    Phần này mình sử dụng jquery chèn trước thẻ đóng </body>

                    Copy
                    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
                    <script>//<![CDATA[
                    $(".toggle-light").click(function() {
                      $("body").toggleClass("night-mode");
                      $(".slider").toggleClass("checked");
                      if ($("body").hasClass("night-mode")) {
                        localStorage.setItem("nightmode", "true");
                      } else {
                        localStorage.setItem("nightmode", "false");
                      }
                    });
                    var local_Storage = localStorage.getItem("nightmode");
                    if (local_Storage == "true") {
                      $("body").addClass("night-mode");
                      $(".slider").addClass("checked");
                    } else {
                      $("body").removeClass("night-mode");
                      $(".slider").removeClass("checked");
                    }
                    //]]></script>

                    Phần quan trọng và mất nhiều thời gian đó là chỉnh lại css khi thẻ body khi được thêm class night-mode do tác động vào nút toggle switch. Về phần đoạn script bạn không cần chỉnh sửa gì thêm, script sẽ check sự kiện nếu đã tác động vào nút chuyển đổi khi load lại trang sẽ tự động thêm hoặc loại bỏ class mà đã tác động.
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn