How To Add Dark Mode To Your WordPress Website Using A Plugin | Night Mode Button

You are currently viewing How To Add Dark Mode To Your WordPress Website Using A Plugin | Night Mode Button

Improve user experience in your website or blog by adding dark mode or night mode on your WordPress website. So, in this post, I will share step by step guide to adding dark mode or night mode to your WordPress site using a plugin.

Table of Contents

Dark Mode has become a new design trend in websites & apps. It improves the readability of text which ultimately improves your experience & also saves the battery of your device.

Top websites like Youtube, Reddit, Facebook, etc. are now offering dark mode or night mode options in their apps & websites. Even browsers are also offering dark mode features to the users.

How To Add Dark Mode To Your WordPress Site or blog?

wordpress night mode plugin

To add the night mode feature, install & activate the Blackout: Dark Mode Widget plugin. This plugin is completely a free plugin to add dark mode on your WP website. After activating this plugin you will see a WordPress dark mode button in the bottom right of your website posts & pages. Clicking the WordPress dark mode button will enable the dark mode feature in your WordPress website or blog. Follow these steps to customize the night mode plugin setting –

  • Go to the Setting > Blackout.

                 Under Custom Position:

Show in the post only: If you want to implement dark mode only in posts then check this box.

                       Botton: Default

                       Right: Default

                       Left: Default

                       Time: Default

  • Under Pre-Defined Positions:

            Choose the position of the dark mode button that you prefer. You can choose between the bottom left or bottom right.

wordpress dark mode switcher
  • Widget Settings:

In the widget setting, you can customize the button color, and its size.

  • Extra Setting:

         The cookie will keep the dark mode version for the visitors that enabled it previously.

          Enable OS mode will show the dark mode of the website if the user is already using dark mode in the OS or browsers.

add dark mode to wordpress website

The feature that I liked the most is the image transformation from light to dark mode. All these above images have a white background but when you turn on dark mode even the image background becomes darker which ultimately improves readability.

While testing this plugin, only the header menu was not in the dark mode & it is not converting some of my images in the dark mode as you can see in the sidebar but the sidebar images are in the dark mode in the home (this can be a bug). These are the only cons of the plugin. Maybe in the future update, the developer of this plugin might address this issue.

I have tested this plugin in the OceanWP theme & it works perfectly. There is one more plugin called WP Night Mode to add night mode or dark mode to any WordPress website. But this plugin is not easy to set up & didn’t work properly with the OceanWP theme.

Conclusion: How To Add Dark Mode On WordPress Using Plugin

Dark mode or night mode has become a new web design trend in 2022. Most of the top websites are offering dark mode options to their users. Night Mode doesn’t harm the user’s eyes and improves the user experience. Try this plugin and enable dark mode or night mode on your WordPress website or blog.

Best Black Friday Web Hosting Deals

A2 Hosting

Starting At $2.99/month

cloudways hosting review 2020

Cloudways Hosting

Starting At $10/month

black friday web hosting deals

WPX Hosting

Starting At $20.83/month

Sandip Maheshwari

A guy blogging for the last 4 years, I am a guy who loves to write about SEO, social media and affiliate marketing. An avid cricket fan, die-hard fan of Silicon valley the series. I love to blog in my free time to share my knowledge with people around the world.

This Post Has 2 Comments

  1. Reetu

    Informative article. I’ll definitely try this on my website.
    There is an another plugin named WP Dark Mode. You can try it and share your experience too. It is a free plugin. You can easily found it on WP repo. Here is the link:
    Have a good day!

    1. Sandip

      Hi Reetu,

      Thanks for your feedback. I will try this plugin & will update this post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.