How to Add Dark Mode to WordPress Sites in 2 Easy Steps

I am impressed to see how Twitter turns dark if I choose a dark theme for my computer. I wish all the websites I visit did the same. Yes, many of your website visitors might be more comfortable exploring your content in dark mode. What if your website turns dark, complying with the theme of visitors’ computers? To enable this, you have to add dark mode to WordPress sites. And we are going to show the method in some easy steps.

Having your site built on WordPress is a blessing. Because there is always a WordPress plugin to add anything you want for your website. For this tutorial, we are lucky to have WP Dark Mode, which will add dark mode to WordPress sites without going through any complicated settings. The dark mode is also called night mode as people generally prefer night mode when lights are out. In this case, you can also say we are adding night mode to WordPress sites.

No matter whether you call it dark mode or night mode, let’s see how it is done.

How WP Dark Mode in WordPress Sites Works

Dark mode, aka night mode, usually reduces the white light from users’ computer browsers making it easier for their eyes. WP Dark Mode WordPress plugin intelligently detects device preference for themes (Dark or Light) and dynamically delivers a well-crafted dark mode experience for your readers. That means if your readers are using a dark theme for their device, they do not have to do anything manually to enable dark mode on your site.

The process is automatic. And it works across all operating systems, including Android, iOS, and macOS. But despite having a dark theme for readers’ devices, they can switch to regular light mode just by clicking on a floating switch button on your site. 

How to Add Dark Mode to WordPress Sites

As we said earlier, we will add dark mode to WordPress sites with a plugin, so our process involves installing the plugin and setting it up. Let’s get started.

Step 1: Install and Activate WP Dark Mode WordPress Plugin

Installing WP Dark Mode is just like installing any other WordPress plugin. Just log in to your WordPress site. Go to Dashboard > Plugins > Add New. Search WP Dark Mode, then Click Install and Activate subsequently.

Step 2: Add Dark Mode to the WordPress Site in the Settings

By installing and activating WP Dark Mode, you have already set up dark mode on your website’s front end. Go to Settings > WP Dark Mode. Under General Settings, you can enable/disable frontend dark mode, decide to have a dark mode switcher button, and enable and disable OS-aware dark mode.

With this tweak in the settings, you are completely done with adding a dark mode to your WordPress site. Take a look at the GIF below.

Also, you can take full control over your website’s dark mode design. Pick a custom color or choose from preset colors, set up dark mode according to readers’ time zone, and do many more. But for that, you have to switch to the WP Dark Mode Pro version.

Set up Display For Dark Mode

Choose the design of your website’s floating switch button for the front end. There are multiple design options to choose from. You can change the button text and do many more here.

You can also select the position of the floating dark mode switcher button on the front end. Decide to place it on the left bottom and right bottom of your website.

Set up Your Website Style For Dark Mode

You can choose the style for your website’s dark mode. With the free version, you can choose from the available  2 presets. With WP Dark Mode Pro, you can choose from 9 more preset styles.

Also, you can customize the display colors if you have the Pro version. Set up dark mode with advanced options and do many more. But for basic dark mode, the free version works just fine.

How to Add Dark Mode to WordPress Admin Dashboard

Do you want to add dark mode to the WordPress admin dashboard? Fortunately, you can do this with the WP Dark Mode WordPress plugin too. And it’s way easier.

Once you have installed and activated the WP Dark Mode plugin on your website, Go to Settings > WP Dark Mode. Under General Settings, you can see the Enable Backend Darkmode toggle. If you enable the dark mode on the backend, you will see a dark mode switch button in the backend admin bar.

Now you can switch to light and dark mode on your admin dashboard with just a simple click.

Apart from these, you can select dark mode images, set up dark mode style, apply custom CSS on dark mode, choose the dark mode switcher button, and do many more things with this powerful night mode WordPress plugin. 

WP Dark Mode WordPress plugin works both on Gutenberg editor and Elementor page builder. Also, it provides a widget for Elementor and a dedicated block for the Gutenberg editor. You can place the dark mode switcher button on any page or post with them.

So, if you follow our instructions carefully, you will enable dark mode on your site both for the front end and back end. I hope this tutorial helped you. Please do visit Virfice regularly for such stuff. Good luck.