Add dark mode to your wordpress site
Tags: wordpress, javascript, css
Published: 2020-07-18 20:32:29

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](https://dipankarmaikap.com/)
##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.
```css
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`.
```html
<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.

1. Add the `.dark` or `.light` class to the body when clicks on the toggle button.
2. Add different classes to the toggle button so the icons change based on the current theme.
3. Set initial theme as soon as the page renders.
4. 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.
```javascript
//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 l`ocalStorage`, 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.
```javascript
//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.
```javascript
//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.
```javascript
//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](https://dipankarmaikap.com/) 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.