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.
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:
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.
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:
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.
Nelio Content
I’m so happy about Nelio Content that I will sound like a payed advocate… but here’s why you’ll love it: it works as promised, its auto-scheduling feature is top-notch, Nelio’s value for money is unmatched, and the support team feels like your own.
Panozk
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.
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.
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:
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.
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:
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:
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.
Leave a Reply