Đổi Sáng / Tối cho trang web đơn giản

Xem demo Tải về

Trong bài viết có sử dụng, các bạn có thể tự thay đổi cho phù hợp:

• PHP
• jQuery
• Font Awesome

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!