How to build a Dark Mode interface for WordPress Website

Tutorials 0 lượt xem

[WordPress Tips] Instructions on how to build a Dark Mode interface for WordPress Website – Dark Mode interface is an all-black interface, this will help save energy when you use your computer, in addition, it can save energy. eye protection if using the computer in the dark or in high light? Therefore, building a dark interface for your Website is essential for readers so that they have the optimal choice when accessing and using your website.

As you can see my Computer Tips Blog has also integrated this feature! sure that this new interface will help you when reading articles in unfavorable mode, to enable this feature you just need to look on the Menu bar you will see an option icon between light and dark , just switch back and forth between the two interfaces you want to see!

Build Dark Mode interface for Website

In the previous article about WordPress tricks, I showed you how to  create a multi-color Menu in WordPress so that you can customize the menu bar professionally, continue in this article I will show you how to build a multi-color menu in WordPress. build Dark Mode interface for WordPress Website?

If you are using the WordPress source code, then integrating the “Dark Mode” dark theme becomes a lot easier, with the support of the Plugin you can enable the Dark Mode theme for your website within a few days. implementation step.

First, install the Plugin called WP Night Mode (if you don’t know how to install Plugin for WordPress, you can refer to the article on how to install Plugin for WordPress) . After the installation is complete, you proceed to activate the Plugin and configure it to use.

#Create a toggle button on the Menu

First, go to Appearance > click Menus .

How to build a Dark Mode interface for WordPress Website 1

Click “Screen Options” and check the CSS classes property .

How to build a Dark Mode interface for WordPress Website 2

Ok! Now create a new Menu using the “Custom Links” function and add a new Menu .

How to build a Dark Mode interface for WordPress Website 3

In this new Menu in the CSS class you just need to call the class wp-night-mode   .

#Customize the interface

After performing the above step, an icon will appear on the Menu so you can switch between the two modes. To customize the first interface, go to Appearance > click Customize .

How to build a Dark Mode interface for Website WordPress 4

Scroll down to the bottom and you will see the “Night mode” option appear .

How to build a Dark Mode interface for WordPress Website 5

Click on it and proceed to modify the interface to your liking.

How to build a Dark Mode interface for WordPress Website 6

Once done, click “Published” to apply the new interface.

#Switch interface

After completing the above steps, you will go out of the homepage, now you will see an option to switch between the two modes, just select the mode you want to see.

How to build a Dark Mode interface for WordPress Website 7

And this is the Dark Mode interface of the Tips Blog? It’s too simple for you to integrate the Dark Mode interface for WordPress Website, isn’t it?

Finally, if you find the article useful, please subscribe to my blog regularly to update the latest articles via Email – Thank you!

Bài viết liên quan