How to Activate The Night Mode in WordPress

Published in WordPress.

Watch our video

There is a better version of your web

Share this post

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.

13 thoughts on “How to Activate The Night Mode in WordPress

  1. It worked thank you, but how do I put it in a place that is not menu, so that people could see it immediately

    1. Do you mean the switch to activate the night mode? Well it depends on where do you want to put it. But you can copy the same HTML of the switch in the menu and then place it somewhere else.

    2. Maybe you can try out a floating menu plugin, and put the code in the floating menu that you will create.
      I have not tried that though, just guessing

  2. It´s really awesome! Great I was looking for this a long time.
    Now all works, I have the toggle button. But there are still white spaces at my website. Cant add a screenshot here.

    The very left and right parts of my page are still white.

    Your explanation is:
    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.

    But can´t really make anything of it.
    My theme has a Dark Skin Mode. Isnt is possible for the visitors to switch directly to that dark skin mode as an admin can?

    That mode looks beautiful

    1. If your theme has a dark skin mode, contact the developers of this theme. I’m pretty sure they will help you. Otherwise you’ll need to add additional CSS rules through the WordPress customizer to fix the white sections.

  3. Thanks for the review. Found the plug-in but no docs. Quick question. Its making columns and sections that are transparent, such as text over images and my header, non-transparent and filled with the ‘dark’ body colour. Can’t seem to find a solution.

    1. The plugin right now is not perfect. You should adapt your theme stylesheets to fix the wrong styles. If you don’t know how to write CSS, contact some designer near your location and ask for help.

  4. Wp night mode plugin is not working with my themd

    1. That’s unfortunate! But I guess it’s actually very difficult to make a plugin that’s compatible with all themes… you might need to tweak your theme yourself, or try to get in touch with the developer of your theme (or WPNight’s) and ask them for help.

  5. If it works for your website can you please tell us the theme

  6. Its great plugin. Worked well for my website. Is it not compatible with mobile / tablet mode? I tried but it doesnt show page content in mobile mode. Any solution?

    1. Then you should check your own theme. It may be the case there is some CSS you need to include to make it work.

  7. Thanks for the nice post. But WPPOOL has developed a really nice plugin for dark mode.

    WP Dark Mode https://wordpress.org/plugins/wp-dark-mode/ it provides some unique features

    1. OS based auto mode selection that works on MacOS, Windows, Android, and iPhone
    2. Time based mode selection
    3. A few different switch styles
    4. Elementor and Gutenberg block Support
    5. Custom and color presets
    6. Ability to disable Dark Mode for a section

    The plug-in is easy to use. Just install and activate. It starts working!

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.