How to Add Dark Mode in WordPress (Elementor, Block Editor, CSS & More)

Want to add dark mode to WordPress? You’re not alone. You can easily add dark mode to WordPress using plugins, page builders like Elementor, or even custom CSS.

Whether people are browsing at night, reducing eye strain during long reading sessions, or simply prefer the sleek aesthetic of darker interfaces, more than 80% of users say they prefer websites that support dark mode. And yes, you absolutely can add dark mode in WordPress — no matter your technical skill level or which theme or page builder you use. There are many ways to add dark mode to WordPress, depending on your theme and setup.

The best part? You don’t need to write a single line of code.

In this guide, we’ll walk you through multiple ways to add dark mode to your WordPress site:

• The easiest and fastest method using a plugin
• How to add dark mode in Elementor
• Tips for the Block Editor (Gutenberg)
• Manual options using custom CSS
• And even how to make your code blocks dark-mode friendly

Let’s start with the method we recommend for almost everyone — using a plugin. WordPress dark mode is a must-have in today’s UX-driven web design.

Using a Dark Mode Plugin (Recommended)

If you’re looking for the fastest, most reliable, and code-free way to add dark mode to your WordPress website, using a plugin is the clear winner. Using a plugin is the fastest method to add dark mode to WordPress without writing code. If you’re using a page builder, Darkify helps you add dark mode to WordPress easily.

While you can manually style your site with CSS, that approach requires time, testing, and technical knowledge — and still might not account for every theme element or plugin conflict. Plugins, on the other hand, take care of the heavy lifting for you. Darkify is the easiest way to enable WordPress dark mode across your entire site — no code required.

🏆 Enter Darkify: The Best WordPress Dark Mode Plugin

Darkify is one of the most powerful and user-friendly plugins available for enabling dark mode on WordPress. With one-click activation, support for both frontend and admin dashboard, and compatibility with major page builders (including Elementor), it’s an ideal solution for beginners and pros alike.

Plus, Darkify includes features like:

• A floating toggle switch you can fully customize
• Automatic dark mode based on OS preference or time of day
• Keyboard shortcuts, image brightness controls, and more

If you want to offer your visitors a seamless, professional dark mode experience — Darkify should be your first stop.Next, let’s look at how to add dark mode to specific environments like Elementor and the Block Editor.

Dark Mode in Elementor

Elementor is one of the most popular WordPress page builders, but it doesn’t include a native dark mode toggle for frontend visitors. That means if you want to offer a dark mode experience on an Elementor-powered site, you’ll need to implement a solution yourself — or better yet, use a plugin like Darkify that does it all for you. If you’re building with Elementor, Darkify makes integrating WordPress dark mode smooth and flexible.

🔌 How to Add Dark Mode to WordPress with Elementor

The good news? Darkify works seamlessly with Elementor out of the box.

Here’s how to integrate dark mode into your Elementor site using Darkify:

1. Install & Activate Darkify
   From your WordPress dashboard, go to Plugins > Add New, search for “Darkify,” and click Install → Activate.
2. Enable the Frontend Toggle
   In the Darkify settings, enable the floating toggle or add it via shortcode inside your Elementor layouts (like headers or footers).
3. Customize It to Match Your Design
   Use Elementor’s design tools to style the area around the toggle. Darkify’s customizable styles and color presets will handle the rest — adapting your content, buttons, backgrounds, and more.
4. Time/OS-Aware Settings
   Let Darkify automatically match dark mode to your visitor’s device preference or switch based on time of day — no additional setup needed.

💡 Pro Tip:

You can even embed the toggle inside an Elementor section using Darkify’s shortcode feature, giving you total layout control.

Darkify removes the headache of trying to write dark mode CSS for every widget, section, or button inside Elementor — and saves you hours of debugging.

Dark Mode in Gutenberg / Block Editor

The WordPress Block Editor (Gutenberg) is improving with every release, but when it comes to native dark mode support, it still has its limitations — especially on the frontend.

❌ No Native Dark Mode Toggle (Yet)

There’s currently no built-in dark mode toggle for visitors in Gutenberg. You can style individual blocks or create your own dark-mode class manually with custom CSS — but that’s a time-consuming, error-prone process unless you’re an advanced user.

✅ How Darkify Solves It

Darkify takes care of the frontend styling for Gutenberg-based sites — automatically. Whether you’ve built your pages entirely with blocks or use a mix of Gutenberg and third-party plugins, Darkify adapts to your theme and block content seamlessly.

• Text, buttons, background colors, headings, and more are intelligently inverted or adjusted
• Images and SVGs can be styled separately (e.g., grayscale, brightness, transparency)
• You can even exclude specific blocks or pages from dark mode if needed

🧪 Block Editor Preview Workaround

One challenge with Gutenberg is that dark mode may not show up inside the editor preview — even if it looks perfect on the frontend.

Here’s how to preview properly:

• Use Darkify’s frontend toggle to view your content live in dark mode
• Or, switch your entire browser/device to dark mode to test auto-detection

If you’re using full-site editing (FSE) themes, Darkify still works great — it simply applies its styling to the rendered output, regardless of how your blocks are composed.

Bottom line? Darkify handles the dark mode legwork, so you don’t need to battle Gutenberg’s limitations or write custom styles for every block. One plugin, one click — and your content adapts beautifully. Block Editor users can also benefit from WordPress dark mode thanks to Darkify’s automatic styling support.

Use Custom CSS to Add Dark Mode to WordPress

If you’re comfortable with HTML and CSS, you might prefer to implement dark mode manually using custom code. While not as quick or flexible as using a plugin, this method offers full control — and is ideal for developers building custom themes or lightweight sites without plugins.

🧑‍💻 When to Use This Approach

• You’re creating a custom-built theme or headless WordPress setup
• You want to avoid third-party plugins
• You need precise control over styling for performance or design reasons

🛠️ Simple Dark Mode Toggle with CSS

Here’s a basic example of how to add dark mode to WordPress using a toggle and CSS classes:

HTML:

<button id="darkModeToggle">Toggle Dark Mode</button>

CSS:

body.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

Developers can manually implement WordPress dark mode using toggle-based CSS classes.

JavaScript:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.body.classList.toggle('dark-mode');
});

This will apply the dark-mode class to your entire site’s <body>, which you can target in your CSS to invert colors, adjust typography, and restyle elements as needed.

⚠️ Things to Watch Out For

• You’ll need to manually handle images, icons, and third-party plugin elements
• You may also need to save user preferences using cookies or localStorage
• Testing across themes and mobile devices can be time-consuming

If you’re not building a custom theme from scratch, Darkify is still a faster and more robust solution — and even offers custom CSS injection if you want both control and convenience.

Dark Mode for Code Blocks

If your WordPress site includes code tutorials, documentation, or dev-focused blogs, don’t forget your code blocks — they need to look great in dark mode too.

Plugins like Prism.js, Highlight.js, or CodeMirror are commonly used for syntax highlighting. But many of them default to light themes unless explicitly styled.

🎨 How to Style Code Blocks for Dark Mode

First, make sure your code highlighter plugin supports theme switching. For example, Prism.js offers several dark themes like prism-okaidia.css or prism-tomorrow.css.

Then, add conditional styling based on your dark mode class:

CSS:

body.dark-mode pre,
body.dark-mode code {
  background-color: #1e1e1e;
  color: #d4d4d4;
}

You can also load a different Prism.js theme when dark mode is enabled:

<link rel="stylesheet" id="prism-light" href="prism-light.css">
<link rel="stylesheet" id="prism-dark" href="prism-dark.css" disabled>

<script>
  const toggle = document.getElementById('darkModeToggle');
  toggle.addEventListener('click', () => {
    const isDark = document.body.classList.toggle('dark-mode');
    document.getElementById('prism-dark').disabled = !isDark;
    document.getElementById('prism-light').disabled = isDark;
  });
</script>

Don’t forget to optimize your code snippets for WordPress dark mode for maximum readability.

✅ Darkify Handles This Automatically

If you’re using Darkify, it automatically adjusts code block contrast to match your dark theme — no extra setup required. It also works alongside most syntax highlighting plugins, so you don’t need to tweak every detail manually.

Pro Tip: When writing for developers, dark-themed code blocks increase readability, reduce eye strain, and match your readers’ expectations — especially when your site uses full dark mode.

Pro Tips for a Seamless Dark Mode Experience

Once you’ve got dark mode working, why stop at the basics? Whether you’re using a plugin like Darkify or going the custom route, these advanced features can elevate your user experience and make your site feel smart, modern, and responsive.

🌙 Time-Based Dark Mode Activation

With time-based activation, your site automatically switches to dark mode in the evening and back to light mode in the morning — just like your phone or desktop.

Why it matters: This subtle touch aligns your website with your visitors’ natural rhythms and environments, improving comfort during night-time browsing.

How to enable: In Darkify, simply toggle the “Time-Based Activation” setting and set your preferred schedule.

🖥️ OS-Level Dark Mode Detection

Darkify also supports OS-based dark mode detection, which means your site can match the visitor’s system theme settings (like macOS, Windows, iOS, or Android).

Why it matters: It gives your users a seamless experience that’s consistent with how the rest of their device works — no manual toggle required.

How to enable: Darkify detects system preferences out of the box. Just activate “OS-aware mode” in the settings.

🖼️ Image and Logo Switching

One of the most overlooked areas in dark mode implementation is media — logos, icons, and images often don’t look right with a dark background.

Darkify Pro gives you the ability to:

• Replace light logos with dark versions
• Apply grayscale or brightness filters to images
• Ensure SVGs and transparent assets still look clean and professional

Result: A fully cohesive brand experience in both light and dark modes.

Conclusion

By now, you know there’s more than one way to add dark mode to WordPress — from writing custom CSS to integrating dark mode in Elementor or Gutenberg. But if you’re looking for the fastest, easiest, and most powerful solution, one plugin consistently stands out: Darkify.

Whether you use Elementor, Gutenberg, or custom code, WordPress dark mode enhances both style and accessibility.

Frequently Asked Questions (FAQ)