How to Add Dark Mode to Your WordPress Website (The Easy Way)

Do you want to add dark mode to your WordPress site?

By adding a dark mode to WordPress, your website will adapt automatically based on the visitor’s browser preferences. You can also add a dark mode toggle to your site, so visitors can easily switch between dark and light modes.

In this video, we’ll show you how to add dark mode to your WordPress website.

0:00 Droit Dark Mode, installation, and activation
0:27 General settings and appearance
1:43 Setting it up on the backend

Related Links
►Get more amazing info on our blog! https://www.wpbeginner.com/wp-tutorials/how-to-add-dark-mode-to-your-wordpress-website-easy/
►Droit Dark Mode plugin page https://www.wpbeginner.com/refer/wordpress.org/plugins/droit-dark-mode/

Top Resources

⚡Use Promo Code WPBVIP⚡

►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/

Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner

Follow us on Twitter:
https://twitter.com/wpbeginner

Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/

#WPBeginner #WordPress #WordPressTutorial


The easiest way to create dark mode for Your website is by using a plugin and The plugin we'll be using is Droid dark Mode So to get started let's go to plugins Add new And we're going to search for Droid Dark mode This is the plugin we want so let's go Ahead and click install now And once we're done installing you want To stick around to activate it as well Great now that we see it's active we can Either come here to settings or now we Have something on the left that we can Go to if we need to make any adjustments Once we're in the settings we want to Choose our preset color so let's come Down to our preset color area and with The free version there are two color Options to choose from you can pick the One that you want and then click save Settings and now we want to go ahead and Adjust the display settings on where we Want this to show so we can go to Display settings And the body position this is where you Choose where they are able to switch so Let's go into the top right Save settings here And now we want to go ahead and turn it On so let's go to general settings You can enable dark mode And this will be on the front end so

When users see it they'll have it on the Front end by default it'll be in the Light mode unless you enable default Dark mode on the website with this Toggle And you can also enable dark mode on the Back end if you want and you can set the Color palette here Go ahead and save settings And now when we go to visit the site on The front end We have this area right here where then We can click it and turn it into dark Mode I'll enable dark mode on the back end We'll go color setting one Once we save settings Once we refresh it we have an area here Within dark mode will be enabled on the Back end as well and if you're looking For an easy way to customize your home Page watch this video next as we walk You through step by step on how to Customize your home page in WordPress And I'll see you over there

You might like