Cách Tạo Tính Năng Dark Mode ( Sáng / Tối ) Cho Blogspot

Hiện nay trào lưu Drak Mode đang khá phổ biến trong các blog .Tùy vào theme mà website của bạn có hoặc chưa có tính năng này .Vì vậy , bài viết này mình sẽ hướng dẫn các bạn cách để thêm tính năng này cho blog .

<style>
.dark-mode{width:66px}
.toggle,.mode{position:relative;float:right;outline:0;border:0;padding:0;overflow:hidden;cursor:pointer}
.toggle{margin-left:10px;border-radius:10px;width:33px;height:20px}
.toggle,.mode::before,.dark .mode::after{background:#ccc}
.dark .toggle{background:#444}
.auto .toggle{background:#6d6!important}
.toggle::before,.mode::before,.mode::after{position:absolute;content:''}
.toggle::before{top:1px;left:1px;transition:.4s;background:#fff;width:18px;height:18px}
.auto .toggle::before{left:14px}
.toggle::before,.mode,.mode::before,.mode::after{border-radius:50%}
.dark .mode{top:2px;left:-2px;overflow:visible}
.dark .mode,.dark .mode::before{border-radius:0}
.mode,.dark .mode::before,.mode::after{background:#999}
.mode{width:20px;height:20px}
.dark .mode,.mode::before,.mode::after{width:16px;height:16px}
.mode::before{top:2px;left:2px}
.dark .mode::before{top:0;left:0;transform:rotate(45deg)}
.mode::after{top:-3px;left:7px}
.dark .mode::after{top:1px;left:1px;width:14px;height:14px}
</style>
<script>
//<![CDATA[
/*
Dark mode made by duy-pham.blogspot.com
*/
function auto(){document.body.classList.add('auto');if(new Date().getHours()>21||new Date().getHours()<7){document.body.classList.add('dark');localStorage.setItem('799738dark','true')}else{document.body.classList.remove('dark');localStorage.setItem('799738dark','false')}}function dark(){localStorage.getItem('799738dark')=='true'?document.body.classList.add('dark'):document.body.classList.remove('dark')}if(localStorage.getItem('799738auto')=='true'){auto()}else{localStorage.getItem('799738dark')==null?auto():dark()}function toggle(){localStorage.setItem('799738auto',localStorage.getItem('799738auto')=='true'?'false':'true');localStorage.getItem('799738auto')=='true'?auto():document.body.classList.remove('auto')}function mode(){document.body.classList.remove('auto');localStorage.removeItem('799738auto');localStorage.setItem('799738dark',localStorage.getItem('799738dark')=='true'?'false':'true');dark()}
//]]>
</script>

Bước 3 : Chèn đoạn code sau vào nơi mà bạn muốn nó hiển thị

<div class='dark-mode'>
 <button class='toggle' onclick='toggle()' type='button'/>
 <button class='mode' onclick='mode()' type='button'/>
</div>

Bước 4 : Tìm đoạn CSS có dạng :

.header{
background-color:#FFFFFF;
color:#000000;
}

Sau đó các bạn chuyển code trên thành :

.header{
background-color:#FFFFFF;
color:#FFFFFF;
}
.dark .header{
background-color:#FFFFFF;
color:#FFFFFF;
}

Lưu ý : Thay FFFFFF thành mã màu bạn muốn ( bạn có thể lấy mã màu Tại Đây)

Bước 5 : Lưu lại chủ đề và xem kết quả !

LỜI KẾT

Chỉ cần giành ra 1 chút thời gian là bạn có thể thêm 1 tiện ích mới cho blog rồi .Nêu có thắc mắc gì hay để lại comment để được chungchúng tôi giải quyết !