Do you want to add dark mode to your website WordPress?
Many devices now come with native dark mode support. Adding this mode to your Website Automatically adapts your design to your users' browser preference. You can even add a switch to your website to switch to it.
In this article, we are going to show you how to easily add dark mode to your WordPress website both on the frontend and in the admin area.
But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog
Then back to why we are here.
What is dark mode and why add it to your website?
Dark mode is used on mobile devices and computers to reduce the amount of white light on the screen.
Some devices come with a night mode that actually uses warmer color tones instead. Dark mode takes a different approach by adding dark colors to the background.
If you have an iPhone or Android device, you may be able to switch to dark mode just by using a toggle.
Alternatively, on your computer, you can view websites in dark mode using a Chrome extension like Night Eye. Here's how BlogPasCher's blog section looks using this plugin:
Adding a dark mode to your website gives users the ability to turn dark mode on and off when viewing your website. It also gives you more control over how your website displays in dark mode.
Popular websites like YouTube also offer a dark color scheme. This allows users to watch videos late at night with a more comfortable experience.
Besides adding dark mode to your website frontend, you can even add dark mode to your WordPress admin area. This can be useful if you are working on your website in the evening or at night.
First, let's take a look at adding dark mode to your WordPress website. Next, we'll cover adding dark mode to your WordPress dashboard.
Tip: Do you want a website with a dark color scheme, even with the user's device in normal or day mode? So, check out our list of best dark themes for WordPress.
Adding Dark Mode to Your WordPress Website
First of all, you need to install and activate the plugin WP Dark Mode. For more details, see our step-by-step guide on how to install a WordPress plugin.
After activation, go to the page Settings »WP Dark Mode from the WordPress dashboard and click on the tab General Settings. You should be redirected there automatically.
Here, the parameter 'Enable OS aware Dark Mode' has been activated for you. This means that the visiteurs will automatically see the dark mode version of your website when their device is set to dark mode.
The parameter 'Show Floating Switch'has also been activated. This means that users can switch their website to dark mode at any time, even if they haven't enabled a dark mode option on their device.
Just visit your website, and you will see the switch in the lower right corner. Click on it to instantly switch your website to dark mode on your device:
There are more customization options available on the page Settings »WP Dark Mode. However, these are quite limited with the free version.
For example, you just need to click on the tab display Settings to change the style of the floating switch:
You can also customize the dark mode colors using the tab Style Settings :
Make sure you click the button Save Settings to save the settings after making changes.
Please note: With the free version of this plugin, you only get the first 2 styles of floating switch, and the first 2 color presets.
The pro version offers many more design options, in addition to the ability to enable dark mode at specific times and the ability to add custom CSS code.
Adding dark mode to the WordPress dashboard
WordPress comes with color schemes for the admin area, but none of the default color schemes reduce the white light coming from your screen. Fortunately, this plugin solves this problem.
Let's take a look at how to easily add dark mode to your WordPress admin area for a user experience nicer during the late hours.
You just have to go to the page Settings »WP Dark Mode and click on the tab General Settings. Then flip the switch 'Enable Backend Darkmode'. Don't forget to click on the button Save Settings at the end of the page :
You will now see a new switch in the top bar of your admin area:
Just click this switch to instantly switch your admin area to dark mode.
Tip: If your website has several WordPress users, each person can switch to dark mode as they prefer.
Since 'Dark Mode'is not an admin color scheme, you can easily use it with an existing WordPress admin color scheme. To define this, just go to Users »Profile and click an option under Admin Color Scheme.
Note that you will need to turn off dark mode in order to see the admin color scheme options:
When writing a post in WordPress block editor, you can also switch to dark mode. Click on the small color icon at the top left, then select the mode you want to use:
Now you can comfortably write and work on your website at night without straining your eyes.
Other recommended resources
We also invite you to consult the resources below to take more ownership and control of your website and blog.
- How to embed videos in your WordPress blog posts
- How to add a Beach Slider on a WordPress form?
- 7 WordPress plugins to create notifications bars
- 8 WordPress plugins to add price charts to your blog
Conclusion
Here is ! That's it for this guide. We hope this article has helped you learn how to add dark mode to your WordPress website. You can also read our article on 9 WordPress plugins to customize your dashboard.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
If you have a friend or a comment, please leave it in the section comment. Mostly share this article on your different social networks.
...
