As more and more websites adopt a dark mode feature, it’s becoming increasingly important to provide this option for your visitors. If you have a WordPress website, you may be wondering how you can add a dark mode feature without using a plugin. In this article, we’ll walk you through the steps to add dark mode to your WordPress website without relying on a plugin.
Step 1: Add a Toggle Switch
The first step is to add a toggle switch that allows users to switch between light mode and dark mode. You can add the switch anywhere on your website, but a popular spot is the header or footer. In this tutorial we will add all code through the functions.php file but you can also add the code to your website’s header.php or footer.php file. Here is an example code:
add_action('wp_footer', 'darkmode_toggle_button');
function darkmode_toggle_button()
{
?>
<button id="dark-mode-toggle">Darkmode Toggle</button>
<?php
};
This code creates a toggle switch that users can click to switch between light and dark mode. You can style the switch however you like using CSS.
Step 2: Add JavaScript to Switch Theme
The next step is to add JavaScript code that switches between the light and dark mode themes when the toggle switch is clicked. You can add this code to your website’s footer.php file or just past the code in your functions.php.
Here is an example of what your JavaScript code might look like:
add_action('wp_footer', 'save_darkmode_setting');
function save_darkmode_setting()
{
?>
<script>
var darkModeSwitch = document.getElementById("dark-mode-toggle");
darkModeSwitch.addEventListener("click", function() {
var bodyElement = document.querySelector("html");
bodyElement.classList.toggle("darkmode");
if (bodyElement.classList.contains("darkmode")) {
localStorage.setItem("darkMode", true);
} else {
localStorage.setItem("darkMode", false);
}
});
</script>
<?php
}
This code adds an event listener to the toggle switch and sets or unsets the class “darkmode” in your html-tag depending on the state of the switch. It also sets an item in localStorage so that the user’s theme preference persists between visits.
We also need to add some JavaScript to read the dark mode setting on page load:
add_action('wp_head', 'my_add_dark_mode_checker', 5);
function my_add_dark_mode_checker()
{ ?>
<script>
(function() {
const darkMode = localStorage.darkMode === 'true';
if (darkMode) {
document.querySelector('html').classList.add('darkmode');
}
})();
</script>
<?php }
This function adds a script to the page that reads the darkMode value from localStorage and adds the darkmode class to the body element if the value is true.
By using this hook, we can ensure that the darkmode class is added to the body element early on, creating a seamless transition to the dark mode layout for the user without any white flash or flicker.
Step 4: Create a Dark Mode CSS File
The final step is to add CSS code that contains the styles for your dark mode theme. Just edit your “style.css” in the theme directory.
Since your html-tag now contains the class “darkmode” if dark mode is enabled just add .darkmode in the beginning. Here is an example of what your this might look like:
.darkmode body {
background-color: #000;
}
.darkmode h1,
.darkmode h2,
.darkmode h3,
.darkmode h4 {
color: white;
}
This CSS file specifies the background color of the body-tag and the color of the headings h1-h4.
Conclusion
Adding a dark mode feature to your WordPress website doesn’t have to be complicated. By following the steps outlined in this article, you can easily add a toggle switch that allows users to switch between light and dark mode, create a dark mode CSS file, and add JavaScript code that switches between the two themes. By providing a dark mode option, you can improve the accessibility and user experience of your website.
