1. Thêm class is-dark vào shortcode
Cách đơn giản nhất để áp dụng dark mode là truyền class is-dark trực tiếp vào shortcode. Plugin sẽ tự động nhận diện và điều chỉnh giao diện cho phù hợp.
[init_view_list class="is-dark"]
[init_view_ranking class="is-dark"]Phương pháp này phù hợp nếu website của bạn luôn chạy ở chế độ tối, hoặc bạn đã xác định trước trạng thái giao diện khi hiển thị các khối dữ liệu.
2. Tự động đồng bộ dark mode bằng JavaScript
Nếu website của bạn hỗ trợ chuyển đổi giao diện sáng – tối bằng cách gán class (ví dụ uk-light) vào thẻ <html>, bạn có thể sử dụng đoạn script sau để tự động đồng bộ dark mode cho plugin Init View Count.
document.addEventListener("DOMContentLoaded", function () {
function syncDarkMode() {
const isDark = document.documentElement.classList.contains("uk-light");
document.querySelectorAll(".init-plugin-suite-view-count-list-wrapper").forEach(wrapper => {
wrapper.classList.toggle("is-dark", isDark);
});
document.querySelectorAll(".init-plugin-suite-view-count-ranking").forEach(ranking => {
ranking.classList.toggle("is-dark", isDark);
});
}
syncDarkMode();
const observer = new MutationObserver(syncDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
});Ưu điểm của cách này là plugin sẽ tự cập nhật giao diện mỗi khi người dùng bật/tắt dark mode trên toàn site. Bạn không cần truyền class thủ công vào từng shortcode nữa.
3. Tùy chỉnh giao diện dark mode
Plugin đã hỗ trợ sẵn giao diện tối, nhưng bạn có thể tuỳ chỉnh thêm bằng cách override CSS nếu muốn tinh chỉnh giao diện theo thiết kế riêng. Ví dụ:
.is-dark .init-plugin-suite-view-count-title {
color: #fff;
}
.is-dark .init-plugin-suite-view-count-grid-item {
background-color: #222;
border-color: #444;
}
.is-dark .init-plugin-suite-view-count-ranking-tabs li.active button {
color: #fff;
border-color: #fff;
}Bạn có thể thêm CSS này vào file style.css của theme hoặc thông qua công cụ Customizer của WordPress.
4. Kết luận
Việc kích hoạt dark mode cho plugin Init View Count rất linh hoạt, phù hợp với cả website tĩnh lẫn giao diện chuyển đổi động. Bạn có thể chọn cách thủ công bằng class is-dark trong shortcode, hoặc tự động hoá bằng script đơn giản sử dụng MutationObserver. Hãy kết hợp phương pháp phù hợp để đảm bảo giao diện website luôn đồng nhất và chuyên nghiệp.
Bình luận