Do you want to add dark mode to your WordPress site ?
Many devices now come with native support for Dark Mode. Adding dark to your website automatically adapts your design to users ‘ browser preferences.
You can also add a “D M” toggle switch to your site as well.
In this article, we’ll show you how to easily add dark style to your WordPress website on both the front end and the admin area.
Table of Contents
ToggleWhat is dark mode and why do you add it to your website ?
“D M”e is used on mobile devices and computers to reduce the amount of white light from the screen
Some devices come with a night mode that actually uses warmer tones instead.
Dark mode uses a different style by adding dark colors in the background.
If you have an iPhone or Android device, you may be able to switch to night mode simply by using the toggle switch.
Alternatively, on your computer, you can view websites in dark mode using a Chrome plugin such as Night Eye.
Adding dark mode to your site gives users the option to turn night mode on and off while viewing your site.
It also gives you more control over how your site looks in night mode.
Popular websites such as YouTube also offer a dark color scheme.
This allows users to watch videos late at night with a more comfortable viewing experience.
Apart from adding “D M” to the front end of your website, you can also add night mode to your WordPress admin as well.
This can be useful if you work on your site in the evening or at night.
First, we’ll take a look at adding dark mode to your WordPress site.
Adding dark mode to the WordPress admin dashboard
First Note :
Do you want a website with a dark color scheme, even with the user’s device in Normal mode or daytime mode Then check out our list of the best dark themes for WordPress
Adding “D M” to your WordPress site
First, you need to install and activate the WP Dark Mode plugin . For more details, see our step-by-step guide on how to install a WordPress plugin .
When activated, go to the settings <strong>WP Dark Mode >> in your WordPress administrator and click on the General Settings tab.
You should be redirected there automatically.
Here, the setting “enable Dark Mode aware of the operating system” has been turned on for you.
This means that visitors will automatically see the Dark Mode version of your site when their device is set to dark mode.
The setting “show floating Switch”is also turned on. This means that users can switch their view of the site to night mode at any time ،
Even if the Dark Mode option is not enabled on their device
Just visit your website, and you will see the key in the lower right corner.
Then, Click on it to instantly switch your location to “D M” on your device
Also, There are more customization options available in the settings “WP D M page. However ،
They are very limited with the free plugin
For example, just click on the “Display Settings” tab to change the floating key style
You can also customize the dark mode colors using the style Settings tab :
Be sure to click the Save Settings button after making any changes.
Second Note :
with the free version of WP D M, you will only get the first two floating switch styles and the first 2 Color presets to choose from.
The Pro version of WP D M offers a lot of design options, as well as the ability to turn on dark at specific times and the option of adding custom CSS code.
Add dark style to your WordPress admin
WordPress comes with admin color schemes, but none of the default color schemes reduces the white light coming from your screen. Fortunately ،
This plugin is also working on solving this problem.
Let’s take a look at how to easily add it to your WordPress management area for a more enjoyable user experience during late business hours.
Just go to the settings page “WP D M” and click on the General Settings tab. After that ،
Switch the “Enable Backend Darkmode” switch to the On mode. Don’t forget to click on the Save Settings button at the bottom of the page:
Now you will see a new shift key in the top bar of your administration area:
Just click on this key to immediately switch the administration area to D M.
Third Note :
If your site has many WordPress users, then each person can turn the “D M” on and off as he prefers
Since is not an official color scheme, you can easily use it with an existing WordPress official color scheme.
To set this, just go to the users “profile and click on an option under the admin color scheme.
Note that you will need to turn off dark scheme to see the admin color scheme options:
When writing a post in the WordPress template editor, you can turn on the dark Status as well. Click on the small Color Icon at the top left, then select the mode you want to use :
Now, you can write and work comfortably on your website at night without straining your eyes.
We hope this article helped you learn how to add dark Status to your WordPress site.
You may also like to check out our article about our comparison of the best WordPress hosting companies.
Editing Header and Footer by elementor
Next postHow to hide your WooCommerce from certain countries
Read Next