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