How to Quickly Add Dark Mode to Your WordPress Site

With multiple devices now support dark mode you may want to add dark mode to your WordPress site. This is easy to accomplish with a free WordPress plugin called WP Dark Mode. If you’re an advanced user I’ve also included dark mode media queries for adding custom dark mode CSS.

How to Quickly Add Dark Mode to Your WordPress Site using a Plugin

The easiest way to add dark mode to your WordPress site is to use the plugin WP Dark Mode. There are plenty of ways to add a dark theme to your WordPress site but first we’ll be using this easy to use plugin.

WP Dark Mode allows you to easily add dark mode to your website. You can add it to your site just like adding any other WordPress plugin.

WP Dark Mode on the wordpress.org Repo
WP Dark Mode on the WordPress.org Repo

After activating the plugin you’ll instantly have a button on your site that allows users to quickly change the site to dark mode (or to light mode).

WP Dark Mode toggle button
WP Dark Mode toggle button

Additionally the plugin has an option to match the user’s dark theme option on their device. So if someone is using dark mode on their device your site will show up correctly. Plus if the user wants the light version of the site they can still swap between themes using the moon button.

Dark mode enabled in MacOS

The WP Dark Mode plugin offers a range of settings. It even has an option for the WordPress admin to be dark mode. You can also control the style of the button that lets users switch between styles. Plus you can control the position of the button and even use the included shortcode to put the dark mode toggle on any page.

WP Dark mode settings page
WP Dark Mode settings page

The best thing about this plugin is that it automatically converts your site to dark mode. Now that might not be perfect for every site, especially if you built your site from scratch and want control over every feature.

Below is how to create your own dark theme using CSS.

Creating a Dark Mode Stylesheet with CSS

If you are more advanced and are familiar with CSS you can target dark mode with the media query prefers-color-scheme: dark. This will only apply styles to browsers that are set to dark mode. So for example if a user has dark mode enabled on iOS14 it’ll activate the styles in the prefers-color-schema media query.

/* Example dark mode color schema for CSS */
@media (prefers-color-scheme: dark) {
body {
background-color: #fff;
color: #000;
}
img {
opacity: .8;
transition: opacity .3s ease-in-out;
}
img:hover {
opacity: 1;
}
}
view raw dark-mode-query.css hosted with ❤ by GitHub

Of course to test this you’ll want to set your device to dark color schema to trigger the CSS. Here are tutorials for enabling dark mode on MacOS, iOS, Android, and Windows.


I hope this tutorial was helpful for adding dark mode to your WordPress website. If you have any questions or comments about dark mode let us know in the comments below!

Andy Feliciotti

Andy Feliciotti

Andy has been a full time WordPress developer for over 10 years. Through his years of experience has built 100s of sites and learned plenty of tricks along the way.

Leave a Reply

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

WordPress Tips Monthly

Get the latest from SmartWP to your inbox.