Enable Dark Mode in Init Live Search

16/05/2025 0 7 3 min read

Init Live Search is the official live search plugin from Init HTML for WordPress, designed for speed, smooth performance, and great user interface compatibility. In this article, we’ll show you how to enable dark mode for the search interface — a handy feature if your website uses a dark background or wants to provide a modern, consistent user experience.

Table of Contents

What is Dark Mode in Init Live Search?
1. Enable dark mode via dark class
2. Configure dark mode before plugin loads
Example: Automatically use dark mode if body has class uk-light
Benefits of Enabling Dark Mode
Tips for Using Dark Mode
Why Init Live Search Stands Out
Download Init Live Search Plugin

What is Dark Mode in Init Live Search?

Dark mode helps reduce eye strain at night by minimizing blue light and is increasingly popular across the web. Init Live Search fully supports dark mode — you can enable it via JavaScript or by setting a config before the plugin initializes.

1. Enable dark mode via `dark` class

The quickest way to enable dark mode is by adding the dark class to the search modal after it has been rendered. For example:

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

Note: Make sure this code runs after the modal is rendered. You can trigger it when the user focuses on the search input.

2. Configure dark mode before plugin loads

This is the cleaner approach if you want the plugin to always initialize with dark mode:

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

Place this script before including the plugin file (or inline in the <head>). Available values include:

'light' – Always use light mode
'dark' – Always use dark mode
'auto' – Automatically detect light/dark mode based on user’s system preference

Example: Automatically use dark mode if `body` has class `uk-light`:

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

The code above automatically enables dark mode if your site uses the uk-light class on the <body>.

Benefits of Enabling Dark Mode

Consistent UI: If your site already supports dark mode, the search UI should follow the same theme for consistency.
Better night experience: A dark background reduces glare for users browsing at night.
Mobile friendly: Many mobile browsers support dark mode by default, and Init Live Search will respect that if you choose the auto setting.

Tips for Using Dark Mode

Ensure the modal’s colors aren’t overridden by external CSS. Use DevTools to debug if dark mode doesn’t display properly.
Double-check background, text, and icon colors for good contrast on dark themes.
Try all three modes 'light', 'dark', 'auto' to find the best fit for your site’s overall design.