Add dark mode to your wordpress site

#wordpress #javascript #css

Dark mode is very popular nowadays. In this blog, I’ll explain how I added dark mode into my WordPress site using CSS and Javascript.

My WordPress site is created with Elementor and the Elementor’s hello theme. But you can add the dark mode to any WordPress site.

Check out my website to see the darkmode in action

First Step

In order to add the dark mode, You have to write custom CSS based on that. It should not be very hard you can use the browser inspect feature to find the CSS classes and write a dark mode version of that class.

For example, let’s say you have default color for h1 tag is black and in the dark mode, you want it to be white. For this, your CSS should look like this.

h1{
color:black;
}
.dark h1{
color:white;
}

I hope you get the idea. FYI I have less than 30 lines of CSS for dark mode in my site.

Second Step

Once you have the CSS ready for the dark mode your next step will be to have a button in the header that changes the theme mode. It can be a button with plain text dark and light or you can use icons. I have added the below code in html widget with an Id of toggle_theme_button.

<i id="toggle_theme_button" aria-hidden="true" class=""></i>

If you notice I have not added anything in the class section and if you now publish your site you will see nothing. We will add the classes dynamically based on the theme mode selected.

Now, let’s discuss a few problems we have in front of us and how to solve them.

The Problems

Now the HTML and CSS part is done its time for some javascript.

Add the .dark or .light class to the body when clicks on the toggle button.
Add different classes to the toggle button so the icons change based on the current theme.
Set initial theme as soon as the page renders.
Store user-selected theme in localStorage so it stays the same when the page changes.

We will go through the above list from the bottom. If we go from the top this blog will get longer and we have to refactor the codes once we face different problems.

Third Step

Let’s set the initial theme as soon as the page renders.

//set default theme on load
window.addEventListener("DOMContentLoaded", (event) => {
var theme = localStorage.getItem("theme");
  if (!theme) {
    localStorage.setItem("theme", "light");
  }
  setInitialThemeClass(theme);
console.log("Setting initial theme to - ",theme)
});

As you can see in the above code I’ve added a DOMContentLoaded event listener to check if the user has any stored theme preference in the localStorage, if not we are assigning default light theme. After that, we are passing the selected theme to a function called setInitialTheme(theme). We will look into this function next.

Note – If you are curious why I used DOMContentLoaded instead of onload event listener. I used the onload event listener first and it works but the issue was onload fires when everything is loaded which takes some amount of time so if you change the page you will notice some color flicker. DOMContentLoaded fires as soon as the initial HTML document is loaded, that’s why I choose this.

Fourth Step

The setInitialTheme(theme) function takes the current theme and adds that class to the body either light or dark. And the if condition checks for the current theme and adds toggle button icon class based on that.

//Add initial theme class
var toggle_theme = document.getElementById("toggle_theme_button");
function setInitialTheme(theme) {
  document.body.classList.add(theme);
  if (theme === "dark") {
    toggle_theme.classList.add("icon-sun");
  } else {
    toggle_theme.classList.add("icon-moon");
  }
}

Fifth Step

We have the initial theme setup done now we have to work on the toggle theme button.

//Toggle theme button
toggle_theme.addEventListener("click", function () {
var theme = localStorage.getItem("theme");
  changeTheme(theme);
});

In the above code, we are adding a click event listener to the toggle button and getting the current theme from localStorage and passing it to changeTheme(theme) function.

Final Step

This is the final step after this you will have a working dark mode on your site.

//Change the current theme
function changeTheme(theme) {
  if (theme === "light") {
    localStorage.setItem("theme", "dark");
    document.body.classList.add("dark");
    document.body.classList.remove("light");
    toggle_theme.classList.add("icon-sun");
    toggle_theme.classList.remove("icon-moon");
  } else {
    localStorage.setItem("theme", "light");
    document.body.classList.add("light");
    document.body.classList.remove("dark");
    toggle_theme.classList.add("icon-moon");
    toggle_theme.classList.remove("icon-sun");
  }
}

In this function, we are taking the current theme and if the current theme is light we are changing localStorage theme to dark, adding the dark class to the body and removing the light class and for the toggle button, we are adding the icon-sun class and removing icon-moon class, and opposite in else section.

Congress 🙌 Now you have a working dark theme on your WordPress site.

Note- I started writing blog few days ago on my website and this is my first post on DEV so if I have missed anything or you have questions please let me know in the comments.