How to Activate The Night Mode in WordPress

Published in WordPress.

For some time now, operating systems and applications have included versions of their graphic interfaces in which white backgrounds are replaced by black backgrounds to reduce the emission of light during the night hours and thus damage less your eyes. This is known as night mode.

Whether by fashion or because it really works, night mode is increasingly popular. There are those who ensure that night modes have benefits for the environment since black screens use less energy than white ones. But there are also detractors of this kind of dark modes.

Be as it may, this may be a functionality that you are interested in having also on your website, and for this today we are going to talk about the night mode in WordPress.

WordPress does not yet include a night mode in the its by default, but there are options to add night mode on both the WordPress Dashboard and the frontend. As usual, plugins are the solution to extend WordPress with this curious visual functionality.

How to Activate Night Mode on WordPress Dashboard

We start with the Dark Mode plugin for WordPress, which allows you to activate the night mode on the WordPress Dashboard. It’s easy to use and free.

Install and activate the Dark Mode plugin for WordPress if you want to activate the night mode on the WordPress desktop.
Install and activate the Dark Mode plugin for WordPress if you want to activate the night mode on the WordPress dashboard.

The first thing is to install and activate the plugin. We can find it directly in the WordPress Plugin Directory, directly within the WordPress dashboard through the Plugins menu, as you can see in the screenshot above.

Once the Dark Mode plugin is installed, each user of your WordPress will have on their profile the option to activate it on their Dashboard:

Each user of your WordPress chooses if they want to see the Desktop in night mode or in normal mode.
Each user of your WordPress chooses if they want to see the Dashboard in night mode or in normal mode when you activate the Dark Mode plugin.

The good thing about this plugin is that it is each user who chooses how they want to see the WordPress Dashboard, in dark mode or in normal mode. In this way, if there is someone who wants to continue using the WordPress Dashboard as always, with white backgrounds, then there is no problem in doing so.

With the Dark Mode plugin for WordPress we can activate the night mode on the WordPress Desktop.
With the Dark Mode plugin for WordPress we can activate the night mode on the WordPress Dashboard.

In the previous screenshot you can see the result of enabling the dark mode. And it looks great! I really liked the result of having the black background color also in the central part of the page and not only in the side menu.

Unfortunately, there is a pending issue for the WordPress Dark Mode plugin: to provide compatibility with the Gutenberg block editor. In the following screenshot you can see that it’s not yet able to apply the dark background to Gutenberg:

The Dark Mode plugin to activate the night mode on your WordPress Desktop still doesn't get along with Gutenberg.
The Dark Mode plugin to activate the night mode on your WordPress Dashboard still doesn’t get along with Gutenberg.

I guess if the plugin is successful enough and users ask for it, its developers will end up adapting it so that the block editor also appears in night mode. In any case, Gutenberg’s frenetic pace of development and its “frequent” updates in its styles make adaptation somewhat complex.

How to Activate The Night Mode For Your WordPress Visitors

The Dark Mode plugin only adds night mode on the WordPress Dashboard. The rest of your website, i.e. the frontend that visitors see, will continue to look the same, without suffering any changes.

If you want your visitors to have the option to activate the night mode on your website, using dark backgrounds instead of light backgrounds, you have to install the WP Night Mode plugin.

The WP Night Mode plugin allows you to add the night mode in your WordPress so that your visitors can select whether they want to activate it or not.
The WP Night Mode plugin allows you to add the night mode in your WordPress so that your visitors can select whether they want to activate it or not.

This plugin, like Dark Mode, is completely free and you also have it available in the WordPress Plugin Directory.

Once installed, you will not see anything in Settings or any additional menu. What you have to do is go to the Appearance menu and there to edit your menus. In your main menu you have to add a custom link without any particular URL. This new menu item will help us to add the switch to activate and deactivate the night mode.

You have to add a custom link in our menu so that the WP Night Mode plugin adds the switch to switch between normal mode and night mode.
You have to add a custom link in your menu so that the WP Night Mode plugin adds the switch element to switch between normal mode and night mode.

In the menu management interface itself you have to open the screen options that you will find in the upper-right corner to activate the option to add CSS classes as you see in the following screenshot:

Activate the screen option to add CSS classes in the menus to add the WP Night Mode plugin class.
Activate the screen option to add CSS classes in the menus to add the WP Night Mode plugin class.

Once you’ve done this, when you’re going to edit the menu item we’ve added before you’ll see an additional field where you can add CSS classes. Here you have to include the CSS class wp-night-mode. This class is the one that WP Night Mode needs to identify what item should be used as the night mode switch.

Add the wp-night-mode class in the menu item we have created to take the style of a switch between night mode and normal mode.
Add the wp-night-mode class in the menu item we have created to take the style of a switch between night mode and normal mode.

By default, WP Night Mode is a plugin that does not add dark colors to your interface. You have to be the one who chooses the dark colors you want to show for both the background, the text and the links. To define these colors you have to go to the Appearance menu and there open the Customize menu.

The WordPress customizer will open and there you will find the Night Mode option. If you select it, you will see that you have the options to activate the night mode by default and to create several styles. In each style you define the background color, the color of the text, and the color of the links.

The good thing about the customizer is that you can see a real preview of how your website will look with the chosen colors:

In the customizer we can define the background and text colors and links of the night mode.
In the customizer we can define the background and colors for the text and links of the night mode if we use the WP Night Mode plugin for WordPress.

Unfortunately, the result is not perfect: some elements still have light backgrounds that look odd in the night mode. But don’t worry, we can fix this. From the customizer itself you can add additional CSS rules to fix these small issues.

Go back in the customizer and you will see the Additional CSS option. If you select it you have the possibility to write CSS rules right there. These rules can be of the following type:

body.wp-night-mode-on .class-of-the-element-to-fix {
   color: # 000;
}

Keep in mind that what the plugin really does is to apply the CSS class wp-night-mode-on in the body tag of your website. Therefore, if you want to fix the background of an HTML element and make it dark, all you you have to do is find a selector for that element and apply the fix when the body tag has the wp-night-mode-on class.

In the following comparison you can see a basic comparison between normal mode and night mode with the colors that we have applied:

Captura de pantalla de la web con el modo noche desactivado.
Captura de pantalla de la web con el modo noche activado.
The night mode changes the appearance of your website for your visitors. They are the ones who can select whether they want to see the night mode or the normal mode. Click on the image divider and slide the mouse to see how the view changes in night mode and in normal mode.

Adding night mode to your WordPress is very easy thanks to a couple of plugins. Today we have reviewed plugins that help us activate the night mode on the WordPress Dashboard and in the frontend.

Are you a regular user of the night modes in your applications? Remember to comment down below with your opinion!

Featured image by Priscilla Du Preez on Unsplash.

PoorNot badGoodGreatExcellent (No Ratings Yet)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.