pen paper writing icon WordPress icon png newspaper icon

How To Add Dark Mode To Your WordPress Website

how-to-install-dark-mode

Dark mode is getting really common nowadays in both websites and apps. Having the portability of switching between dark mode and regular mode gives the user the freedom to read or view the website according to his preferences. Dark Mode becomes very beneficial especially when you are reading your website at night, this ensures that less light is emitted onto your eyes as a result it reduces eye strain.

Moreover, dark mode often cuts down harmful blue light exposure and will often increase the battery life of your device that you are using to read the website.

So, do you wish to add a dark mode to your WordPress Website? If yes then you have come to the correct place because today, we will give you a complete guide on how you can select WordPress dark mode in your WordPress website in frontend as well as the admin area.

What Is Dark Mode?

You can find dark modes in mobiles and PC’s or laptops and the dark mode reduces the amount of white light emitted by the screen. Some gadgets include a night mode that employs warmer color tones instead of cooler ones. Dark mode takes a different approach by filling the background with dark hues.

Why Add Dark Mode In Your WordPress Website?

Dark mode gives user a better experience in viewing your websites at night as it reduces the direct light that emitted which can be quite irritating and harmful for the eyes. Moreover, adding a dark mode plugin in your WordPress site means you will have the choice to switch the dark mode both on and off. Additionally, you will have more authority over how your site glances in dark mode.  The dark mode also works like a night mode in the WordPress website

With dark mode WordPress plugin, you necessarily cannot use this only in front-end, instead you can use the dark mode for WordPress admin as well which means you can have a better working experie3nce yourself during night.

How To Add Dark Mode To Your WordPress Website

Down below we will teach you how to add dark mode in your WordPress website. Please follow the steps carefully as this is very easy and it just needs a couple of minutes to complete the whole procedure.

Droit Dark Mode on WordPress.org

Step 1: Installing The Plugin

The first and foremost step is to download and install the Droit Dark Mode by DroitThemes. This is one of the best WordPress dark mode plugins available in the market and you can access the free version as well to check the features before actually paying any money for it.

There are 3 way to install the WordPress plugin.

Method 1: At first The plugin should be downloaded and unzipped. After that Unzip the ‘droit-dark-mode.zip‘ file and place it in the ‘/wp-content/plugins/‘ directory. In the last step, you need to go to Plugins » Admin and active the plugin. 

Method 2: Another step that you can follow to install this dark mode plugin. Dashboard » Plugin » Add New » Search ‘Droit Dark Mode’ » Install » Active.

Droit Dark Mode on Plugin Search Page

Method 3: There is also another step, At first ‘droit-dark-mode.zip‘ should be downloaded then follow the steps: Dashboard > Plugin > Add New > Upload the zip file » Active.

Step 2: Checking The Dark Mode

After activation, navigate to your WordPress admin’s Settings » Droit Dark Mode page and select the General Settings tab. You should be immediately routed there. When a visitor’s device is set to dark mode, they will instantly view the dark mode version of your site.

General Settings on Droit Dark Mode

You will also find a option “Switch Style” that you can switch on or off according to your choice; by default it will be on. This switch can be shown anywhere in your website and user can choose between dark mode and regular mode using this switch.

You can find this switch by default in the bottom right corner of your website; visit your website as a regular viewer and you can click the switch to change your website in dark mode easily.

Step 3: Advance Settings

Well, The Droit Dark Mode comes as both free plugin and paid version. The free version doesn’t allow you too much of customization option whereas the paid version will aloow you to the customize this dark mode plugin in any way you want to.

You can find the customization options in the Settings » Droit Dark Mode » Advance Settings page and there are additional customization choices. Once you’ve decided whether to use dark or bright mode, it’s stored by default.

Changing The Switch Style

To modify the style of the Dark Mode switcher, for example, simply click the Display Settings tab: There are several switch styles to pick from and employ on your website.  You can also use the Elementor widget may be used to add a Switch Button to the content of any post or page.

The Gutenberg block may be used to add a Switch Button to the content of any post or page.

How great it will be if you have the option of setting the switch at different positions.  Well now that is also possible thanx to the Droit dark mode plugin because it allows you to place the switches in various positions in your website starting from left-top, left-bottom, right-top. right-bottom, center-bottom, center-top and so on.

In free version; you will have 2 dark mode switcher option to choose from.

Display Settings on Droit Dark Mode

The user can change the switch position and place them on any content, post or page by using either elementor widget or the Gutenberg Block. The switch can be moved in different positions simply by clicking the switch and pulling your mouse through to find the accurate position.

Changing The Colors Of The Dark Mode

You will have Multiple Color Presets to Choose from a selection of 10+ unique color presets to rapidly alter the dark mode color from the color palette. Just go to the Droit Dark Mode setting then scroll to the style settings and you will find the color option setting that you can customize according to your choice.

Moreover, All major themes on the market are compatible with the Droit Dark Mode plugin, so you’re covered.

In the free version you will have the option of choosing between 2 colors.

Preset Color on Droit Dark Mode

How To Add Dark Mode To Your WordPress Admin

So far we have showed you on how to add the Droit Dark Mode plugin in your WordPress website, now I will show you how we can add this in the admin.

As you might already know that WordPress offers many different admin color schemes but sadly none of them got dark mode and can reduce the light. So, the most simple and effective solution is to use the Droit Dark Mode plugin.

Step 1: How To Add

Simply navigate to the General Settings tab on the Settings » Dark Mode page. Then turn on the ‘Enable Backend Dark Mode’ setting. Remember to save your settings by clicking the Save Settings button at the bottom of the page: And by now there should be a switch at the top of the admin bar that will let you toggle between light and dark mode easily.

Enable Backend Dark Mode on Droit Dark Mode

Step 2: More Customization Option And Features

Let us look into some features that you can find in this dark mode plugin in the admin area.

Choosing The Color

Choose a Color Preset for the Admin Dashboard dpending on your browser, you may set a color preset for the dark and light admin dashboards.This means you will have full access to choose the color according to your choices while working in your WordPress website.

Because ‘Dark Mode’ is not an admin color scheme, you may easily combine it with one that already exists in WordPress. To do so, go to Users » Profile and select an option under Admin Color Scheme from the drop-down menu. It’s worth noting that you’ll need to turn off dark mode to access the admin color scheme options:

User Setting

Setting Night Mode For Different Page And Posts

You will have the option to enable/disable dark mode and select a different color palette on individual postings by your choices. Moreover, for each category, you may enable/disable dark mode and specify a separate color palette.

These customization options works great especially when you wish that your website stand out from rest of your competitor.

Highlighting Different Products Por Contents

Let’s assume you wish to enable or disable dark mode or the night mode on different and specific product or maybe set a different color; This WordPress dark plugin will even allow you to do that.

Let’s suppose you want to highlight a specific content. That’s easy too with this wordpress plugin because for every page/post type you can place the dark mode switch button before/after the content.

Custom Color And Switch Text

You can even choose and set custom colors for all your paragraphs, links, heading buttons and any other UI elements. So many customization options that you will be tired of seeing different options.

You will also be able to edit the text of the dark mode switch in either dark or light.

Image Customization

Image are the first thing that attracts a viewer’s attention in any website. With Droit Dark Mode pro version, you can edit the brightness, opacity and contrast of your image with ease.

Either increase or decrease the brightness, opacity and the contrast as you require to match your contents perfectly.

Little Tip:  You may also use dark mode when composing a post in the WordPress block editor. Select the mode you wish to use by clicking on the small color symbol on the upper left: What more do you need for an easy working experience that will make sure that less strain is put on your eyes.

Conclusion

You are probably here because you wanted to know how to add dark mode in the WordPress website and today, we just did that. So far in this article we have discussed everything that you need to add dark mode in your WordPress website.

Adding dark mode directly in the WordPress site is not possible and for that, you will need an additional Plugin and for us the Droit Dark Mode plugin works really well to give dark mode in your website as well as the admin panel. The customization this plugin gives is immense and you will have a fun time using it with no complain.

close

Don't Miss This Opportunity To Save Extra 10%!

DDARK10

Use this coupon code on checkout


Share:

Leave a Comment