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
Why Is Dark Mode So Popular?
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?
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.
- 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.
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.
A2 Hosting
Starting At $2.99/month
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!
Hi Reetu,
Thanks for your feedback. I will try this plugin & will update this post.