1. Add the is-dark class to the shortcode
The simplest way to activate dark mode is to add the is-dark class directly into the shortcode. The plugin will detect this class and adjust the UI accordingly.
[init_view_list class="is-dark"]
[init_view_ranking class="is-dark"]This method is ideal if your website always uses a dark interface or if you’ve predetermined the display state of the content blocks.
2. Automatically sync dark mode using JavaScript
If your website supports dynamic theme switching by toggling a class (like uk-light) on the <html> element, you can use the following script to automatically synchronize dark mode for the Init View Count plugin.
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"]
});
});This method ensures that the plugin interface updates instantly whenever users switch between light and dark modes across the entire site. There’s no need to manually add the class to each shortcode.
3. Customize the dark mode interface
The plugin comes with built-in dark styling, but you can further customize it by overriding the CSS if you want to tailor the visuals to your own design. For example:
.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;
}You can place these styles in your theme’s style.css file or apply them through the WordPress Customizer.
4. Conclusion
Enabling dark mode for the Init View Count plugin is highly flexible, suitable for both static themes and dynamically switching interfaces. You can either apply the is-dark class manually in shortcodes or automate the entire process with a simple script using MutationObserver. Choose the method that best fits your site’s structure to ensure a seamless and professional user experience.
Comments