How to Add Dark Mode to Your WordPress Website

By Izaj Ahmed Last updated Feb 5, 2023 0

To add dark mode to a WordPress website, you can follow these steps:

Install a plugin: You can use plugins like “Dark Mode for WordPress” or “Dark Mode Switcher” to easily add dark mode to your website.
Custom code: If you prefer to code yourself, you can add the CSS for dark mode to your stylesheet. You will also need to use JavaScript to switch between the light and dark modes.

Here is an example of how you can add a dark mode toggle switch using JavaScript and CSS:

In your WordPress theme’s header.php file, add the following HTML code for the toggle switch:

<button id="dark-mode-toggle">Dark Mode</button>

Add the following CSS code to your stylesheet:

body {
    background-color: #fff;
    color: #333;
}

#dark-mode-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
}

.dark-mode {
    background-color: #333;
    color: #fff;
}

Add the following JavaScript code to your script file or in a custom JavaScript file

const toggle = document.querySelector('#dark-mode-toggle');
const body = document.querySelector('body');

toggle.addEventListener('click', function() {
    body.classList.toggle('dark-mode');
});

Save the changes and refresh your website. You should now have a dark mode toggle switch on your website.

Note: Make sure to backup your website before making any changes, and also, these are just examples and may need to be adjusted according to your specific theme and design.

WordPress