Bật chế độ tối cho Init Live Search

2 tuần 0 21 4 phút đọc

Init Live Search là plugin tìm kiếm trực tiếp (live search) chính chủ từ Init HTML cho WordPress, được thiết kế để hoạt động nhanh chóng, mượt mà và thân thiện với giao diện người dùng. Trong bài viết này, mình sẽ hướng dẫn bạn cách bật chế độ tối (dark mode) cho giao diện tìm kiếm – một tính năng hữu ích nếu website của bạn sử dụng nền tối hoặc muốn đồng bộ trải nghiệm người dùng hiện đại.

Mục lục

Dark mode trong Init Live Search là gì?
1. Bật dark mode bằng class dark
2. Cấu hình dark mode trước khi plugin khởi tạo
Ví dụ tự động nhận dark mode nếu body có class uk-light:
Lợi ích của việc bật dark mode
Tips khi dùng dark mode
Plugin Init Live Search có gì đặc biệt?
Tải plugin Init Live Search

Dark mode trong Init Live Search là gì?

Dark mode (giao diện nền tối) giúp giảm ánh sáng xanh, đỡ mỏi mắt khi sử dụng vào ban đêm và đang ngày càng phổ biến trên web. Init Live Search hỗ trợ dark mode hoàn toàn – bạn chỉ cần bật lên bằng một dòng JS hoặc cấu hình sẵn trước khi plugin khởi chạy.

1. Bật dark mode bằng class `dark`

Cách nhanh nhất để bật chế độ tối là thêm class dark vào modal tìm kiếm sau khi nó đã xuất hiện. Ví dụ:

document.querySelector('#ils-modal')?.classList.add('dark');

Lưu ý: Hãy chắc chắn rằng đoạn code này chỉ chạy sau khi modal đã được render. Bạn có thể gán vào một callback khi người dùng focus vào ô tìm kiếm nếu cần.

2. Cấu hình dark mode trước khi plugin khởi tạo

Đây là cách gọn gàng hơn nếu bạn muốn plugin luôn khởi chạy với giao diện tối:

window.InitPluginSuiteLiveSearchConfig = {
    theme: 'dark'
};

Đặt đoạn JS này trước khi nhúng file plugin (hoặc inline trong phần <head>). Ngoài 'dark', bạn có thể dùng:

'light' – Luôn dùng giao diện sáng
'auto' – Tự nhận dark/light theo chế độ hệ thống của người dùng

Ví dụ tự động nhận dark mode nếu body có class `uk-light`:

document.addEventListener('DOMContentLoaded', function () {
    if (document.body.classList.contains('uk-light')) {
        window.InitPluginSuiteLiveSearchConfig = {
            theme: 'dark'
        };
    }
});

Đoạn code trên sẽ tự động bật dark mode nếu giao diện trang đang sử dụng class uk-light trên thẻ <body>.

Lợi ích của việc bật dark mode

Đồng bộ giao diện: Nếu website của bạn đã có dark mode, giao diện tìm kiếm cũng nên theo cùng phong cách để thống nhất.
Tốt cho trải nghiệm ban đêm: Nền tối giúp người dùng không bị chói mắt khi lướt web buổi tối.
Thân thiện với thiết bị di động: Nhiều trình duyệt mobile đã hỗ trợ dark mode mặc định, và Init Live Search có thể nhận diện điều đó nếu bạn chọn chế độ auto.

Tips khi dùng dark mode

Đảm bảo modal tìm kiếm không bị ghi đè màu bởi CSS bên ngoài. Bạn có thể kiểm tra bằng DevTools nếu dark mode không hiển thị đúng.
Kiểm tra màu nền, màu chữ và icon để đảm bảo độ tương phản tốt khi hiển thị trên nền tối.
Hãy thử cả ba chế độ 'light', 'dark', 'auto' để chọn giao diện phù hợp nhất với giao diện tổng thể website của bạn.

Plugin Init Live Search có gì đặc biệt?

Được viết hoàn toàn bằng Vanilla JavaScript và sử dụng WordPress REST API, Init Live Search mang lại trải nghiệm tìm kiếm mượt mà và hiện đại: