Trong bài viết có sử dụng, các bạn có thể tự thay đổi cho phù hợp:
- PHP
- jQuery
- Fontawesome
HTML
Đầu tiên, bạn cần một biểu tượng để người dùng bấm vào.
<div id="turn-light" class="func-btn"><i class="fas fa-moon" title="Chuyển sáng / tối"></i></div>
jQuery
Để lưu chế độ mà người dùng đã chọn, bạn cần khai báo Cookie.
function deleteCookie(name) { document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;'; } function getCookie(cname) { var name = cname + '='; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name) == 0) return c.substring(name.length, c.length); } return ''; } function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays * 60 * 60 * 1000)); var expires = 'expires=' + d.toGMTString(); document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/"; }
Thay đổi Sáng/Tối khi bấm nút. Với dark.css
là tập tin CSS các bạn tự điều chỉnh.
$(document).ready(function() { $('#turn-light').click(function() { if ($(this).find('i.fas').hasClass('fa-moon')) { $(this).find('i.fas').removeClass('fa-moon'); $(this).find('i.fas').addClass('fa-lightbulb'); $('head').append('<link id="dark-css" rel="stylesheet" href="css/dark.css" media="screen">'); setCookie('dark', 'yes', 24 * 365); } else { $(this).find('i.fas').addClass('fa-moon'); $(this).find('i.fas').removeClass('fa-lightbulb'); $('#dark-css').remove(); setCookie('dark', 'nah', 24 * 365); } }); if (getCookie('dark') == 'yes') { if ($('#turn-light').find('i.fas').hasClass('fa-moon')) { $('#turn-light').find('i.fas').removeClass('fa-moon'); $('#turn-light').find('i.fas').addClass('fa-lightbulb'); } if ($('#dark-css').length <= 0) { $('head').append('<link id="dark-css" rel="stylesheet" href="css/dark.css" media="screen">'); } } });
Để tự động tải chế độ Sáng/Tối, các bạn sử dụng PHP.
<?php if (isset($_COOKIE['dark']) && $_COOKIE['dark'] == 'yes') : ?> <link id="dark-css" rel="stylesheet" href="css/dark.css" media="screen"> <?php endif; ?>
Chúc các bạn thành công!