How to Add Dark Mode to WordPress Without a Plugin (Real Code)

Add another dark mode plugin to a WordPress site and you’ve added another script to load, another settings screen to maintain, and one more thing that can conflict with a theme update. WordPress dark mode without a plugin is the better default for most sites: a few lines of CSS, and if a toggle is needed, a small bit of JavaScript. No extra dependency, no bloat, and full control over exactly how it looks.

What Is Dark Mode and Why Does It Matter for a WordPress Site?

Dark mode is a color scheme that swaps a site’s light background and dark text for a dark background and light text, usually triggered by the visitor’s operating system setting or a manual toggle on the page. It matters for WordPress sites because a large share of visitors already browse with dark mode turned on at the OS level, and a site that ignores that setting can look jarring, cause eye strain in low light, or feel out of step with every app the visitor uses on the same device.

Exact adoption numbers vary by source and platform, but the direction is consistent. According to a 2026 statistics roundup by forms.app, 81.9% of smartphone users have dark mode enabled, and 82.7% of survey respondents said they use dark mode whenever their operating system supports it. Dark mode stopped being a niche preference some time ago; on mobile in particular, it’s closer to the default.

Do You Need a Plugin for WordPress Dark Mode?

No. A WordPress site does not need a plugin to support dark mode. The entire feature can be built with a single CSS media query for automatic OS-based switching, or a small CSS-plus-JavaScript snippet for a manual toggle, and either approach adds a fraction of the code, requests, and database options that a typical dark mode plugin brings with it.

Plugins earn their keep when they solve something genuinely complex. Dark mode isn’t that: it’s a color scheme swap, and WordPress sites already carry more plugins than they need. A shortlist of what’s actually worth installing on a new site is covered in the plugins worth installing on every new WordPress site, and a dark mode plugin rarely makes that list when a dozen lines of CSS does the same job with none of the overhead.

The one exception worth naming: page builder or WooCommerce-heavy sites where color values are hardcoded into hundreds of individual blocks or product templates. On those, a plugin that intercepts and inverts colors at render time can save real hours compared to manually re-theming every section. For a typical brochure site, blog, or portfolio, custom code wins.

How to Add Automatic Dark Mode with CSS (No Toggle Needed)

The fastest way to add dark mode to a WordPress site is a single CSS media query that detects the visitor’s OS-level preference and swaps colors automatically, with no toggle button and no JavaScript required. This uses the prefers-color-scheme media feature, which every modern browser supports.

/* Default (light) colors first */
body {
  background-color: #ffffff;
  color: #1a1a1a;
}

/* Dark mode override */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #f0f0f0;
  }
  a {
    color: #90caf9;
  }
  input, textarea, select {
    background-color: #1e1e1e;
    color: #f0f0f0;
    border-color: #333333;
  }
}

Setting the light-mode colors first, outside the media query, matters more than it looks. It means a browser that doesn’t support prefers-color-scheme just falls back to the normal light design instead of breaking. From there, the dark override only needs to target the elements that actually carry hardcoded colors: body text, links, form fields, and any section background set with a fixed hex value instead of inheriting from the body.

How to Add a Manual Dark Mode Toggle (Step by Step)

A manual toggle lets a visitor override their OS setting and pick light or dark mode directly on the page, and it needs three pieces working together: a CSS class-based theme, a toggle button, and a small JavaScript snippet that saves the choice so it persists between page loads.

1. Write the dark theme as a CSS class instead of a media query, so it can be switched on and off with JavaScript.
2. Add a toggle button to the header or footer template.
3. Add a JavaScript snippet that adds or removes the dark class on click and saves the preference in localStorage.
4. Check localStorage on page load, before the page renders, so returning visitors don’t see a flash of the wrong theme.

body.dark-mode {
  background-color: #121212;
  color: #f0f0f0;
}
body.dark-mode a {
  color: #90caf9;
}

const toggle = document.getElementById('dark-mode-toggle');
const body = document.body;

// Apply saved preference on load
if (localStorage.getItem('theme') === 'dark') {
  body.classList.add('dark-mode');
}

toggle.addEventListener('click', function () {
  body.classList.toggle('dark-mode');
  const isDark = body.classList.contains('dark-mode');
  localStorage.setItem('theme', isDark ? 'dark' : 'light');
});

Page caching is the part most manual toggles trip over. If a caching plugin serves the same static HTML to every visitor, the dark class needs to be added by JavaScript after the page loads, not written into the server-rendered HTML, otherwise every visitor either gets stuck with whichever mode was cached first or the toggle stops working entirely. The snippet above already applies the class client-side for this reason.

Where Should You Paste This Code on a WordPress Site?

The CSS goes in Appearance > Customize > Additional CSS for a quick test, or into a child theme’s style.css for anything meant to stay long-term, since Additional CSS lives in the database and is easy to lose during a theme change. The JavaScript for a manual toggle belongs in a child theme’s functions.php, enqueued as a small separate file rather than pasted inline.

Block themes change this slightly. A full-site-editing theme stores a lot of its default styling in theme.json and the Global Styles interface instead of a single stylesheet, so CSS pasted into Additional CSS can end up fighting values the block editor sets with higher specificity. The shift toward block themes and what it changes about where styling lives is covered in this look at WordPress full-site editing, and it’s worth reading before assuming Additional CSS will behave the same way it did on a classic theme.

Common Mistakes That Break WordPress Dark Mode

The most common way a WordPress dark mode implementation breaks is a hardcoded white background somewhere the CSS didn’t account for, usually inside a page builder section, a WooCommerce template, or an embedded form or iframe that ignores the site’s own styles entirely.

• Section backgrounds set with a fixed hex color inside a page builder module, instead of inheriting from a CSS variable
• A logo or icon saved as a solid black PNG that disappears against a dark background; SVG or a transparent PNG with a light variant fixes this
• Text and background colors that pass contrast checks in light mode but fail in dark mode, which is an accessibility issue, not just a visual one, and worth checking against the same standards covered in this WordPress accessibility checklist
• Embedded forms, maps, or third-party widgets that render their own white background regardless of the page’s theme
• A caching plugin serving a stale, cached version of one mode to visitors who selected the other

Testing dark mode on the actual pages that carry the most hardcoded design, landing pages, product pages, and forms, catches most of these before a visitor does.

The Takeaway

WordPress dark mode without a plugin takes one CSS media query for automatic switching, or a short CSS-and-JavaScript combo for a manual toggle. Either one is lighter than a dedicated plugin, easier to maintain inside a child theme, and gives full control over the exact colors used instead of whatever a plugin’s default inversion produces. Start with the automatic media query, test it on the pages most likely to have hardcoded colors, and only add the manual toggle if visitors specifically ask for one.

Frequently Asked Questions