The WPDarkMode object is available globally on the frontend of every page where the WP Dark Mode plugin is active. It provides a small set of useful methods and properties to control or detect dark mode state in real-time via JavaScript.
✅ What is it? #
WPDarkMode is a singleton instance of an internal DarkMode class that handles dark mode toggling, device preference detection, and user choice memory. You can use it to integrate custom behavior into your theme or plugin.
Available Methods & Properties #
WPDarkMode.isActive → Boolean #
Returns true if dark mode is currently active on the page, otherwise false.
if (WPDarkMode.isActive) {
console.log(‘Dark mode is ON’);
}
WPDarkMode.isDeviceDark → Boolean #
Returns true if the user’s device is set to dark mode preference via OS.
if (WPDarkMode.isDeviceDark) {
console.log(‘User prefers dark mode by system setting’);
}
WPDarkMode.activate() #
Forces dark mode on, regardless of user/device settings.
WPDarkMode.activate();
WPDarkMode.deactivate() #
Turns off dark mode manually.
WPDarkMode.deactivate();
WPDarkMode.toggle() #
Toggles between active/inactive states based on current mode.
WPDarkMode.toggle();
WPDarkMode.remember() #
Saves the current dark mode choice (light or dark) to local storage. This is typically called after a toggle to persist user preference.
WPDarkMode.toggle();
WPDarkMode.remember();
WPDarkMode.forget() #
Deletes any stored user choice or system detection. On next visit, the mode will be determined fresh.
WPDarkMode.forget();
Tracking Changes #
Dark mode state changes trigger a wp_dark_mode custom event. You can listen for it to respond when users toggle between modes.
window.addEventListener(‘wp_dark_mode’, function (e) {
console.log(‘Dark mode is now:’, e.detail.isActive ? ‘ON’ : ‘OFF’);
});
