Tích hợp dark mode không sử dụng Plugin

Nếu bạn là coder như tôi hoặc vì lý do nào đó bạn muốn website linh hoạt hơn, tôi cũng sẽ hướng dẫn bạn cách tích hợp dark mode mà không sử dụng plugin trên trang web của bạn.

Thêm html và css

Đầu tiên, chúng ta cần thêm html cho nút chuyển đổi sang chế độ dark mode. Để làm điều đó, chúng tôi sẽ sử dụng một phần nhỏ mã từ plugin WP Night Mode , vì nó là mã nguồn mở và miễn phí để sử dụng. Đặt mã này vào đầu trang hoặc chân trang của theme của bạn. Trong trường hợp của tôi, tôi quyết định thêm nó vào footer:

<div class="wpnm-button">
    <div class="wpnm-button-inner-left"></div>
    <div class="wpnm-button-inner"></div>
</div>

Tiếp theo là thêm CSS cho đẹp.

/* Dark mode switcher */
 .wpnm-button {
     font-size: 16px 
}
 .wpnm-button-inner-left:empty {
     margin-left: -0.625em 
}
 .wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
    /*transition*/
     -webkit-transition: 0.4s ease-in-out;
     -moz-transition: 0.4s ease-in-out;
     -o-transition: 0.4s ease-in-out;
     transition: 0.4s ease-in-out;
     outline: none 
}
 .wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
     display: inline-block;
     font-size: 0.875em;
     position: relative;
     padding: 0em;
     line-height: 1em;
     cursor: pointer;
     color: rgba(149, 149, 149, 0.51);
     font-weight: normal 
}
 .wpnm-button .wpnm-button-inner-left:before {
     content: '';
     display: block;
     position: absolute;
     z-index: 1;
     line-height: 2.125em;
     text-indent: 2.5em;
     height: 1em;
     width: 1em;
     margin: 0.25em;
    /*border-radius*/
     -webkit-border-radius: 100%;
     -moz-border-radius: 100%;
     border-radius: 100%;
     right: 1.625em;
     bottom: 0em;
     background: #FFB200;
     transform: rotate(-45deg);
     box-shadow: 0 0 0.625em white 
}
 .wpnm-button .wpnm-button-inner-left:after {
     content: "";
     display: inline-block;
     width: 2.5em;
     height: 1.5em;
     -webkit-border-radius: 1em;
     -moz-border-radius: 1em;
     border-radius: 1em;
     background: rgba(255, 255, 255, 0.15);
     vertical-align: middle;
     margin: 0 0.625em;
     border: 0.125em solid #FFB200 
}
 .wpnm-button.active .wpnm-button-inner-left:before {
     right: 1.0625em;
     box-shadow: 0.3125em 0.3125em 0 0 #eee;
     background: transparent 
}
 .wpnm-button.active .wpnm-button-inner-left:after {
     background: rgba(0, 0, 0, 0.15);
     border: 0.125em solid white 
}
 .wpnm-button .wpnm-button-inner-left {
     color: rgba(250, 250, 250, 0.51);
     font-weight: bold 
}
 .wpnm-button.active .wpnm-button-inner-left {
     color: rgba(149, 149, 149, 0.51);
     font-weight: normal 
}
 .wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
     color: rgba(250, 250, 250, 0.51);
     font-weight: bold 
}
Khi light mode được bật ( Mặc định)
Khi dark mode được bật

Thêm class dark-mode vào thẻ body

Tiếp theo, chúng ta cần thêm một class “dark-mode” vào thẻ body. Class này nhằm đánh dấu chế độ dark-mode đang được active.

Để làm điều đó, Bạn cũng cần tìm cách lưu trữ tùy chọn người dùng khi tải lại trang. Bạn có thể sử dụng localStorage để lưu trữ các tùy chọn của người dùng. Sử dụng mã sau:

jQuery(function($) {
    /*Click on dark mode icon. Add dark mode classes and wrappers. 
    Store user preference through sessions*/
    $('.wpnm-button').click(function() {
        //Show either moon or sun
        $('.wpnm-button').toggleClass('active');
        //If dark mode is selected
        if ($('.wpnm-button').hasClass('active')) {
            //Add dark mode class to the body
            $('body').addClass('dark-mode');
            //Save user preference to Storage
            localStorage.setItem('darkMode', true);
        } else {
            $('body').removeClass('dark-mode');
            localStorage.removeItem('darkMode');
        }
    })
    //Check Storage. Display user preference 
    if (localStorage.getItem("darkMode")) {
        $('body').addClass('dark-mode');
        $('.wpnm-button').addClass('active');
    }
})

Bây giờ, Bạn vào thử bật hoặc tắt nút chuyển đổi dark-mode và kiểm tra xem thẻ body. class “dark-mode” đã được thêm vào hay chưa.

Nếu đã được thêm vào thì thêm đoạn css này để kiểm tra nó có hoạt động như bạn mong đợi không nhé.

body.dark-mode * {
    background: #333;
}

Nếu hoạt động ok thì bạn css cho theme của bạn theo ý bạn nha.

Lưu trữ sự lựa chọn của user thông qua phiên thông qua cookie

Nếu bạn muốn lưu lại cookie về lựa chọn của user thì bạn sửa lại đoạn js ở trên thành

jQuery(function($) {
    //Create the cookie object
    var cookieStorage = {
        setCookie: function setCookie(key, value, time, path) {
            var expires = new Date();
            expires.setTime(expires.getTime() + time);
            var pathValue = '';
            if (typeof path !== 'undefined') {
                pathValue = 'path=' + path + ';';
            }
            document.cookie = key + '=' + value + ';' + pathValue + 'expires=' + expires.toUTCString();
        },
        getCookie: function getCookie(key) {
            var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
            return keyValue ? keyValue[2] : null;
        },
        removeCookie: function removeCookie(key) {
            document.cookie = key + '=; Max-Age=0; path=/';
        }
    };

    //Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
    $('.wpnm-button').click(function() {
        //Show either moon or sun
        $('.wpnm-button').toggleClass('active');
        //If dark mode is selected
        if ($('.wpnm-button').hasClass('active')) {
            //Add dark mode class to the body
            $('body').addClass('dark-mode');
            cookieStorage.setCookie('myNightMode', 'true', 2628000000, '/');
        } else {
            $('body').removeClass('dark-mode');
            setTimeout(function() {
                cookieStorage.removeCookie('myNightMode');
            }, 100);
        }
    })

    //Check Storage. Display user preference 
    if (cookieStorage.getCookie('myNightMode')) {
        $('body').addClass('dark-mode');
        $('.wpnm-button').addClass('active');
    }
})

Thêm class “dark-mode” vào thẻ body thông qua class filter

Bây giờ chúng ta có một cookie “myNightMode” được tạo khi người dùng chọn chế độ dark mode. Điều duy nhất còn lại là lấy cookie này bằng php và thêm nó vào thẻ body. Thêm code này vào functions.php của theme của bạn:

function my_dark_mode($classes) {
    $my_night_mode = isset($_COOKIE['myNightMode']) ? $_COOKIE['myNightMode'] : '';
    //if the cookie is stored..
    if ($my_night_mode !== '') {
        // Add 'dark-mode' body class
        return array_merge($classes, array('dark-mode'));
    }
    return $classes;
}
add_filter('body_class', 'my_dark_mode');

Ok. Vậy là xong. Hãy sử dụng nó trên trang web của bạn để cải thiện trải nghiệm người dùng và bảo vệ đôi mắt của khách truy cập vào ban đêm!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Exit mobile version