How to Quickly Add Dark Mode to Your WordPress Site

The fastest way to add dark mode to your WordPress site is to install the free WP Dark Mode plugin: it adds a toggle button and auto-detects the visitor’s OS dark mode preference. If you’d rather avoid a plugin, you can add a few lines of CSS using the prefers-color-scheme media query to style your site for dark mode visitors automatically.

This guide covers both options: the plugin route for non-developers, and the custom-CSS route for anyone comfortable editing their theme’s stylesheet.

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 – Improve Accessibility with AI Powered Dark Theme · 90% Avg Review · 20,000+ Active Installs

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.

After installing and 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).

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.

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.

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.

If you need more options the WP Dark Mode plugin also offers a pro version that lets you replace specific images (like logos) and much more.

Adding Dark Mode to Your WordPress Admin

If you’ve added the WP Dark Mode plugin mentioned above you can also have it enable dark mode for the WordPress admin as well.

in the WP Dark Mode settings page on the General Settings tab you’ll see the “Enable Backend Darkmode” option you can enable.

Once you enable this feature your WordPress admin area will have a new button on the top to enable dark/light mode.

Best of all it follows your OS setting so if your device is set to dark mode so will your admin!

For a plugin-free dark mode, the custom CSS approach below works in any WordPress theme:

Creating a Dark Mode Stylesheet with CSS

If you are more advanced and 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.

Add the snippet below to your theme’s custom CSS (Appearance > Customize > Additional CSS, or your theme’s stylesheet). The browser applies these styles only when the visitor’s device or browser is set to dark mode:

@media (prefers-color-scheme: dark) {
    body {
        background-color: #111827;
        color: #f3f4f6;
    }
    a {
        color: #93c5fd;
    }
    .wp-block-button__link {
        background-color: #f3f4f6;
        color: #111827;
    }
    img {
        opacity: .85;
        transition: opacity .3s ease-in-out;
    }
    img:hover {
        opacity: 1;
    }
}

That’s the foundation. Add more selectors as needed for your theme’s specific elements (header, nav, sidebar, cards). Common targets to dial in: card backgrounds, code blocks, table rows, form inputs, and any element with a fixed color that won’t naturally invert.

This approach uses the visitor’s system preference: if their OS or browser is set to dark mode, the styles activate automatically with no toggle needed. The trade-off is that visitors can’t override your CSS to force light mode (the way a plugin-based toggle lets them do). For most sites that’s a fine trade.

To test, switch your OS or browser to dark mode. On macOS it’s System Settings > Appearance > Dark. On Windows 10/11, Settings > Personalization > Colors > Choose your mode. On iOS and Android, Settings > Display > Dark mode. Chrome and Firefox also have a “force dark mode” devtools toggle for testing without changing your OS.

For dark palette inspiration, ColorKit has a gallery of dark color palettes, or you can roll your own with the color palette generator.

Plugin vs Custom CSS: Which Should You Use?

Use the WP Dark Mode plugin if you want a visitor-controlled toggle (a moon icon they can click), don’t want to touch CSS, or your site has lots of media and UI elements that need automatic recoloring. The plugin handles the visual transformation across most themes automatically.

Use the custom CSS approach if you want full control over every dark-mode color, you prefer not to add a plugin, or your site is hand-built and you want the dark theme to match your design system exactly. The CSS approach is also faster (no JavaScript toggle) and more accessible (respects OS preference automatically).

Many sites combine the two: prefers-color-scheme for the default behavior, plus a JS toggle (or a plugin) for visitors who want to override their OS preference.

Frequently Asked Questions

For most sites the WP Dark Mode plugin is the right starting point. Install it, enable the OS-detection option, and you have a working dark mode in five minutes. For a polished result that matches your brand exactly, layer a custom prefers-color-scheme block on top of (or instead of) the plugin and tune the specific elements that don’t quite work.

While you’re customizing your site appearance, also see our guides on adding custom CSS the right way and building a child theme so your dark mode CSS survives theme updates.