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

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

how to add dark mode in Wordpress website

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 add dark mode or night mode in your WordPress site using a plugin.

Table of Contents

Dark Mode has become a new design trend in websites & apps. It improves readability of text which ultimately improves your experience & also save 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 feature to the users.

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

wordpress night mode plugin

To add the night mode feature, install & activate 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 in your website posts & pages. By 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, its size.

  • Extra Setting:

         The cookie will keep the dark mode version to 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 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 OceanWP theme & it work 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 worked 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 user experience. Try this plugin and enable dark mode or night mode on your WordPress website or blog.

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.

cyber monday web hosting deals 2020


cloudways cyber monday deal


cyber monday sale 2020


How To Add Dark Mode To Your Wordpress Website Using A Plugin
Article Name
How To Add Dark Mode To Your Wordpress Website Using A Plugin
The best way to add dark mode to your Wordpress website is by using a plugin called Blackout: Dark Mode Widget plugin. This plugin is easy to use & will show dark mode or night mode by default for those users who are using dark theme in their browser.
Publisher Name
Publisher Logo

2 thoughts on “How To Add Dark Mode To Your WordPress Website Using A Plugin | Night Mode Button”

  1. 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: https://wordpress.org/plugins/wp-dark-mode/
    Have a good day!

Leave a Reply

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

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