How to add Dark Mode to your Wordpress website

How to add Dark Mode to your WordPress website

Learn how to add dark mode toggle to your Wordpress website and customise the dark mode colors of all the elements for free in this tutorial.

This snippet requires the following Themes/Plugins/Services/Tools:

You can copy the code and paste it in the customiser area of your theme by going to Appearance-> Customizer -> Additional CSS or Put it in the Elementor theme style’s custom css area.

Don’t forget to change various colours when the dark mode is active. BG stands for background when dark mode is active, link is the link color when the dark mode is active and so on.

In case you want to change any other properties, target it by using html.wp-dark-mode-active and the classname of the element and style in Dark Mode.

Additional Reference

CSS Filters to apply to images and other elements when the dark mode is active.

Copy the snippet from below:

html.wp-dark-mode-active {
–wp-dark-mode-bg: blue;
–wp-dark-mode-text: #fff;
–wp-dark-mode-link: pink;
–wp-dark-mode-border: #394654;
–wp-dark-mode-btn: #2f3c4a;
}

html.wp-dark-mode-active img{
filter: grayscale(50%);
}

html.wp-dark-mode-active a{
font-size:18px;
}

/*Change the color values as per your wish*/

How to add Dark Mode to your WordPress website

DONT HAVE A WEBSITE?

NEW COURSE!