Thêm chức năng tắt/bật đèn cho blog/website

Chia sẻ:

28.5.19 | 0 nhận xét | lượt xem

Thủ thuật này mình viewsoure của bác Duy Phạm và cũng áp dụng cho blog này. Để hiểu rõ hơn về chức năng này các bạn click vào biểu tượng bên dưới

Những thủ thuật tắt/bật đèn mà hiện tại các blog khác đang chia sẻ đó là tạo ra 1 ảnh tối màu có độ trong suốt phủ lên toàn bộ bề mặt website, đồng nghĩa với việc hoạt động bôi đen hay click vào link đều không có tác dụng, hơn nữa khi chuyển trang hoặc F5 sẽ lại trở về trạng thái lúc đầu. Còn ở bài viết này sẽ hướng dẫn các bạn thêm chức năng này nhưng website vẫn hoạt động bình thường và cũng sẽ lưu trạng thái khi chuyển trang hoặc F5. Thủ thuật này đơn giản nhưng sẽ rất mất thời gian để thiết kế thêm giao diện cho tắt đèn nữa, đòi hỏi bạn cũng phải kiên trì một chút

Nút bật/tắt

Sử dụng đoạn CSS sau để tạo nút bật/tắt

.mode:after{content: "Tắt đèn"}
.dark .mode:after{content: "Bật đèn"}

Và dán đoạn mã bên dưới vào vị trí muốn đặt nút

<button class="mode" onclick="dark()" type="button"></button>

Để cho chức năng này hoạt động thì cần phải có đoạn script bên dưới, bạn chèn sau thẻ <body>

<script>
//<![CDATA[
/*
Dark/Light Mode for Blogger
Author: Duy Pham
Website: duy-pham.blogspot.com
*/
((localStorage.getItem('dark')||'true')=='true')?document.querySelector('body').classList.add('dark'):document.querySelector('body').classList.remove('dark');function dark(){localStorage.setItem('dark',(localStorage.getItem('dark')||'true')=='true'?'false':'true'); localStorage.getItem('dark')=='true'?document.querySelector('body').classList.add('dark'):document.querySelector('body').classList.remove('dark')}
//]]>
</script>

Tạo giao diện cho chế độ bật/tắt

Đối với giao diện ban đầu là bật đèn thì giữ nguyên rồi giờ chỉ sửa giao diện cho chế độ tắt đèn thôi. Rất đơn giản, bạn muốn thay đổi thành phần nào chỉ việc thêm .dark vào trước nó là được, ví dụ

.post h3{color:#eee;}
.dark .post h3{color:#333;}

Như vậy nếu để chế độ bật đèn, chữ trong thẻ h3 sẽ có màu mã là #eee và khi chuyển sang chế độ tắt đèn chữ trong thẻ h3 sẽ có mã màu là #333
Do template của mỗi bạn khác nhau nên mình chỉ có thể hướng dẫn, bạn nào thực hiện theo các bước trên mà không được thì để lại bình luận bên dưới mình sẽ giải đáp. Hoặc nếu các bạn có góp ý gì cũng để lại bình luận nha, cảm ơn và chúc thành công!

Vọc từ Duy Phạm's Blog