When you visit a page, it is set by default to display in a light mode, which is a little hard and uncomfortable for dark-mode lovers to see. With this WP Night Mode plugin, visitors can switch your website between Night Mode and the normal style smoothly, improving the user experience.

Not only does Night Mode add an unbelievably aesthetic look to your site, but it also supports the readability. It replaces white and gray with darker colors, which helps visitors to read articles, view images or watch videos in a long period of time, especially at night without much eye strain.

You can easily add Night Mode to your site following steps below.

First of all, you need to have the WP Night Mode plugin installed and activated in your site. See our step by step guide on how to install a WordPress plugin here.

Next, in your WordPress admin area, go to Appearance > Menus > select your Primary Navigation Menu > add a Custom Link to the menu. You can enter the link as # and text as ‘Night Mode’ or any phrase you’d like.

Then, you need to add a CSS class to the link. Open the Screen Options drop-down box at the top right corner of the Menus page and enable CSS classes.

Expanding the newly-added custom link in the menu, you will see a new box for adding a CSS class. Enter ‘wp-night-mode’ into the box and save your menu. Now you can see a new toggle button on the front end of your WordPress site.

If you hit the toggle button to switch to the night mode, but there’s no change, you need to customize the plugin a little more.

Go to WordPress Night Mode settings from WordPress admin area > Appearance > Customize > Night Mode. Configure the color options and the toggle button style as you like and click Publish to save your updates. Now go back to your site front end and see how awesome it is.

If you want to change colors in some other elements, you can use the Additional CSS field. Here is a CSS example:

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

That is how you can enable the night mode on your whole WordPress website. In case you just want to add the night mode toggle button in a single post or page, use the [wp-night-mode-button] shortcode.

Night Mode works on your website front end. If you’d like to have a dark mode feature on your WordPress admin dashboard (the back end), you may refer to this article.

Now try and enjoy the new feature!

Tags: ,