In this post, we're going to be discussing how to add dark mode to WordPress. Recently, many major websites have added dark modes to their user interfaces, Such as YouTube, Reddit, Stack Overflow, Facebook, and more.

The massive spike that occurred in October 2019 coincided with the addition of dark mode to Instagram and a couple other major applications. That outlier excluded, you can see that dark mode has been growing in popularity in the past couple of years.

As many major companies transition into the dark mode era, you should be considering this too. Not only is it on trend, but it's beneficial to your users, and could increase retention rates. It reduces eyestrain, increases battery lives of the devices that visitors use to browse your website, and it simply looks amazing.

If you're considering adding dark mode to your WordPress website, there are a couple plugins that make this task fairly simple. In this blog post, we're going to introduce the plugin that we use to give WordPress a dark mode, and review the steps necessary to add this functionality to your website.

The Night (Dark) Mode Plugin

The plugin that we're going to be using to add dark mode to our WordPress website is called night mode. It's a free plugin that can easily be found on the WordPress repository, and quickly installed into your website.

Surprisingly, the plugin only has 2000 installations, but it works well and does what it says it will do. That's probably why it has a rating of 4.5 stars out of five. As an agency, we use this plugin on many of our client web sites that contain well followed blogs as a way to easily add dark mode.

After installing the plugin, head over to appearance ? customize. Once the customizer interface is loaded for WordPress, click on the “night mode” tab.

Now it's time to begin setting up your dark mode for WordPress.

Choosing And Setting Your Dark Mode Colors

The first step to adding dark mode to word press, after installing the plugin, is choosing your color scheme. You can do this a couple of ways:

1. Use Coolors.co. You can use this tool to generate your own color schemes, or you can explore the creations of other users.
2. Straight Up Invert. You can take the standard color scheme that your website uses, and simply invert every color on it. This may work, but typically the colors are too harsh to look good.
3. Copy Others. This would actually be our suggestion. Go onto a major platform that has a dark mode, and copy the general colors that they use.

To aid you in your color scheme creation, we have created three individual collections of colors that you can use on your own website. These colors have been copied from Facebook, Reddit, and Firefox.

Now that you have your selection of dark mode colors, it's time to implement them into your website using the Night Mode plugin.

In the night mode tab on the WordPress customiser interface, Begin running through the options.

Choose the toggle style, set the toggle size, and then change the body, text, link, and link hover colors. These will be applied globally to your website. When a user toggles the night mode switch on, these colors will replace the existing color scheme.

You can also choose to have night mode as a default, which is a nice option to have if you end up liking your new color scheme better than your existing one.

You can choose between 5 individual night mode toggles , and place the toggle anywhere in your website via a shortcode.

(use the style Attribute to designate which toggle style you want to be using in that specific location).

Customizing Dark Mode Further

It is unreasonable to expect the plugin to add a fully functional version of dark mode to your WordPress website without any additional customization. Especially with WordPress page builders and custom themes, the few options that this plugin gives you in the customizer interface won't completely apply dark styling to your entire website.

To truly utilize this plugin to its fullest potential, you'll need to go ahead and add in some custom CSS.

Don't worry, even if you're not familiar with CSS, this is a very easy task to do. I'm going to walk you through, step by step how to add a night mode style for every element in a website.

The plugin tells you exactly how to apply night/dark mode styling to WordPress elements:

If you want to change color in some other elements you can use the Additional CSS field. CSS example: body.wp-night-mode-on .element-class { color: #000; }

To change the color on individual elements, all you need to do is toggle dark mode, and see where it doesn't apply. Then, right click on the element that night mode didn't apply to, inspect it, and get its CSS ID or class name.

In this example, we are going to be using a CSS ID to apply darkmode styling to an individual element on WordPress. The ID is “#div_block-48-27”.

Now that we know the identifier, we're going to run into custom CSS and add the styling for the element when night mode is toggled.

To specify that this CSS should only be applied when dark mode is on, apply this prefix:

body.wp-night-mode-on

This means that the CSS style will not be applied unless dark mode is toggled on. After the prefix, add your element identifier. In this example our identifier is #div_block-48-27. It doesn't need to be a CSS ID, it could also be a class.

body.wp-night-mode-on #div_block-48-27 {
}

Now that we have our CSS identifier, we can add the styling that will be applied when dark mode is toggled on. Most of the time, the only styling that you need to change is the background color and text color.

body.wp-night-mode-on #div_block-48-27 {
background:#000;
color:#fff;
}

This code will change the background color of the element to be black, and the text of the element to be white.

Run through your entire website, page by page, and identify elements that the global nightmode styling does not apply to you. Then, using the CSS identifying technique that we just mentioned, create the night mode styling for your website.

Keep in mind that this method will work for all WordPress websites, irregardless of the theme, if you're using a page builder, or anything else. Simply find the identifier of the element that you want to change, and then specify the change that will be made to the element when dark mode is toggled via CSS.

Dealing With Images & Graphics

The final hurdle that you'll need to overcome when it comes to adding darkmode to your WordPress website is dealing with images. In some cases, your images can remain as they are. For example, if you turn on dark mode with Instagram, the images do not invert. Instead they remained the same , but the interface around them changes color.

For your WordPress website, especially if it's a blog, we recommend keeping the images as they are. Typically, the average color will fall somewhere in between the extremes of white and black, meaning that the image will be perfectly visible regardless of the interface color.

At the same time, graphics that are black or white (or somewhere close to one of those extremes) could cause you an issue. For example, if you have a black graphic, and your user toggles dark mode on , the graphic will most likely blend into the background. This could be very bad, especially if your WordPress website has graphics like this for the logo, or other important icons. Not only does it hurt the user experience by not providing necessary information, it looks unprofessional and unpolished.

Keep in mind, this issue will probably only apply to you if your logos or graphics are very close to being white or black. If they are multi colored, they may work fine with any type of background color.

However, if they don't fall into that category, there may be an issue.

Luckily, there are many ways to fix this issue. In most cases, you can use CSS filters to easily change the color of your logo to match the user interface coloring that is present on the website. Let's do a couple of examples.

This is our main logo, which is fairly dark. If we transition into dark mode, the text of this logo will get lost in the website.

I think that the best way to make this logo visible when our website is in dark mode is to simply make it white. We can do this in a couple of ways. We can wrap this image in a div, and when the dark mode is toggled, remove the image and replace it with a white PNG version using background-image in CSS. however, that is complicated, and in many cases not possible as you would need to go into the actual files that make up your theme header and edit the PHP (That could be scary, difficult, and confusing).

Instead, we're going to do something else that's easier and quicker. It can also be applied to any theme, as it is using CSS only (It doesn't require any HTML additions).

We're going to use CSS filters to change this logo to complete white. this is a fairly simple thing to do, though it takes 2 steps.

First, we're going to change the brightness all the way down, which makes the logo completely black.

filter: brightness(0);

Then, we're going to invert the image, which changes all black to white.

filter: invert(1);

So your complete CSS looks something like this:

body.wp-night-mode-on img#myphoto {
filter: brightness(0) invert(1);
}

Now, we have a completely white logo for use in our dark mode. Simple, right?

Keep in mind - it is important that there is no background on these images. If there's a background, the filter will apply to that as well, leaving a big white rectangle.

You can use this technique to change any image to white when your dark mode is toggled. This could be very helpful for graphics that are a solid color, and don't work well when the background is dark.

Conclusion

We hope that this article properly introduced you to techniques that you can use to implement dark mode on your WordPress website. Not only does it increase the user experience and follow trends, but it's a very cool functionality to include in your website, and the Night Mode plugin makes it fairly easy to do so.

As always if you have any questions or comments, feel free to leave them in the comments section below.