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 Content
Why Is Dark Mode Is So Popular?
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?
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.
- 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, 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.
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 2020. 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.
SiteGround Hosting – 75% OFF
Our Blog is hosted on siteground hosting. It Offers SSD servers for ultra fast speed.
- Recommended by WordPress.org
- 99.9% Uptime
- User friendly interface
- Custom wordpress migration plugin for wordpress
- Custom plugin for speed optimization
- Better customer support
GreenGeeks Hosting – 60% OFF
GreenGeeks hosting is one of the top hosting provider. Known for its speed & security
- SSD hosting
- Eco Friendly
- Includes Cpanel
- Free SSL Certificate
- Free Domain for 1 year
- 24/7 Customer support