How To Add Dark Mode in WordPress

How To Add Dark Mode in WordPress Free Method

The dark mode is currently being used in most websites, apps, software, and everything. Nowadays, every website needs to have an unclear way. Dark Mode is a helpful feature. For those who have read a post for a long time, Dark Mod is essential because if you don’t use Dark Mode, the blue light of the display does a lot of damage to your eyes which is not the case if you use Dark Mode.

Add Dark Mode In WordPress Free Method

Moreover, if you use the dark mode, your phone’s battery consumes a lot less because if you turn on the AMOLED display dark mode, the dark areas will be fewer pixels, so the battery consumes less. There are many more promising aspects of Dark Mode. I will not talk about this topic today. I will discuss the good and bad elements of Dark Mode one day. Today we will learn How To Add Dark Mode in WordPress Free Method. I will add the WordPress website Dark Mode using a 100% free plugin. So let’s start without further ado.

Install And Active WP Dark Mode Free WordPress Free Plugin

First, enter the dashboard of your WordPress website and click on Add New from the plugin. Type WP Dark Mode By WPPOOL in the search box. Now click on install and activate. If the plugin is active, it will redirect to the settings of the plugin.

How To Add Dark Mode in WordPress Free Method
Install And Active WP Dark Mode Free WordPress Free Plugin

General Settings – WP Dark Mode

Enable Frontend Darkmode

Turn on Enable Frontend Dark mode and click on Save Settings. Turning it on will turn your WordPress website into Dark Mode. Now go to your website and reload. You will see that the dark mode has been turned on.

How To Add Dark Mode in WordPress Free Method
Enable Frontend Darkmode

Special Note: If you are using a cache plugin, you must do Purge All or Delete Cache Otherwise, you will not see any changes to your WordPress site for Cache.

Enable Backend Darkmode

Turn on Enable Backend Darkmode and click on Save Settings. If you turn it on, if a user turns on Dark Mode on his device, your WordPress website will automatically turn on Dark Mode. The user does not have to turn it on automatically. In the same way, if the device has Light mode on, your WordPress website Light mode will be turned on automatically. It can be any device, any Android, Iso, Windows, or Mac.

How To Add Dark Mode in WordPress Free Method
Enable Backend Darkmode

Advanced Settings – WP Dark Mode

Make Dark Mode Default

Make Dark Mode Default Turn it off because your WordPress website will always have Dark Mode on if you turn it on. If a user wants to turn off dark mode, he has to turn on Light mode manually. It’s better to keep it off if you wish to, and you can keep it on if you want.

Time-Based Dark Mode

There is nothing to do here because it is only for paid users

Color Settings – WP Dark Mode

Want to use color presets?

Please turn it on then you will see some color presets below. But only two presets are free, and the rest are for paid users. We have to use one of the two. You select any one and click on the save setting.

Want to use custom colors

There is nothing to do here because it is only for paid users

Accessibility Settings – WP Dark Mode

Enable font size toggle

There is nothing to do here because it is only for paid users

Keyboard Shortcut

Keyboard Shortcut You can turn it on or off. It is of no use. If you turn it on, you can enable/disable the dark mode by pressing (Ctrl + ALt + D) on the keyboard.

Switch Settings – WP Dark Mode

Show Floating Switch

Turn on the “Show Floating Switch.” When you turn it on, your visitors will get a button to switch to Dark Mode from the Frontend.

Floating Switch Style

Floating Switch Style Here, you will find three free button styles for the rest of the paid users. Select anyone you like

Floating Switch Position

Floating Switch Position You can set the position of the button here but only left and right. If you want to set a custom position, you need to take the paid version.

Attention Effect

Attention Effect Here, you can give a Lite animation effect to the button. Here are two free Effects. Select any one of your choices.

Enable Call to action

There is nothing to do here because it is only for paid users

Display Switch in Menu

There is nothing to do here because it is only for paid users

Custom Switch Icon

There is nothing to do here because it is only for paid users

How To Add Dark Mode in WordPress Free Method
Switch Settings

Custom Switch Text

There is nothing to do here because it is only for paid users

Show Above Posts

There is nothing to do here because it is only for paid users

Show Above Pages

There is nothing to do here because it is only for paid users

It is better to keep it off because there is no need for this button since we have started Enable OS aware Dark Mode. To enable OS-aware Dark Mode, our WordPress website will automatically turn on Dark Mode/Light mode according to the OS on which the visitor’s phone/computer has Dark Mode/Light mode.

How To Add Dark Mode in WordPress Free Method
enable OS-aware Dark Mode

Includes/ Excludes

There is nothing to do here because it is only for paid users

Triggers

There is nothing to do here because it is only for paid users

WooCommerce

There is nothing to do here because it is only for paid users

Image Settings

Image Settings Turn it off

Custom CSS

There is nothing to do here because it is only for paid users

Animation

Animation Turn it off. Animation When you turn it on, when a visitor goes from one page to another, it Will reload the page. I wouldn’t say I like the two free animations here. So I turned it off. If you want it, turn it on

So I hope you like today’s post so far. If there is any problem after this, please comment in the comment box, and I will try to give a solution. Goodbye like today will be in the next post. Stay well until then. Stay healthy.

Share your love
SM.Tanvir Hassan
SM.Tanvir Hassan

I love technology and love to learn. This is my personal blog. I share with you everything I learn through this blog

Articles: 24

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published. Required fields are marked *