Back to Blog

How to Add Dark Mode to a WordPress Site (Free Toggle for Any Theme)

Add a visitor dark mode toggle to any WordPress theme for free — how it works, what to check on images and logos, and when a dedicated plugin is better.

To add dark mode to WordPress, install the free ExtenderX plugin and switch on Dark Mode under Site Enhancements → Appearance. Visitors get a floating light/dark toggle that works with any theme, because the DarkReader engine generates the dark colours for you. Check your logo and images afterwards, and keep it as a visitor choice.

Why a toggle, not a dark theme

Building a separate dark design means writing dark styles for every block, plugin and template. An automatic dark mode recalculates colours in the browser instead, so it works on a theme you didn't build. And a toggle lets each visitor choose — dark mode suits some people and not others.

Turn it on

  1. Install and activate ExtenderX.
  2. Go to ExtenderX → Site Enhancements → Appearance.
  3. Toggle Dark Mode on and save.
  4. Open your site in a new tab and click the floating button.

That's it — no theme files, no custom CSS.

Check these five things

CheckWhat can go wrongFix
LogoA dark logo vanishes on a dark headerUse a logo with a light outline or on a solid background
PhotosPhotos usually look fine, but screenshots of white UIs glareAdd a subtle border or a dark-mode-friendly screenshot
Brand coloursRecalculated colours can driftCheck buttons and links keep enough contrast
EmbedsMaps, videos and iframes have their own coloursUsually fine; they keep their original look
FormsInputs from other pluginsFill in a form in dark mode before publishing

ExtenderX vs dedicated dark mode plugins

ExtenderXWP Dark ModeDark Mode Toggle
Free visitor toggleYesYesYes
Works with any themeYes (DarkReader)YesYes
Many switch styles and colour presets—Ultimate (paid)Pro
Scheduling, image replacement—Ultimate (paid)Pro (images)
Admin dashboard dark mode—FreePro
Also: accessibility toolbar, animations, sticky header, maintenance mode, code snippetsYes——

Sources: WP Dark Mode, Dark Mode Toggle, as of October 25, 2026. Disclosure: WPXERO makes ExtenderX (version 1.10.0).

Choose a dedicated plugin if dark mode is a design feature you want to fine-tune — custom switch designs, per-element colours, swapping images. Choose ExtenderX if you want a reliable toggle and would rather not add a separate plugin for it, especially if you also want its accessibility toolbar, which includes high contrast and inverted colours.

Dark mode and accessibility

Dark mode isn't an accessibility fix by itself. Some people with astigmatism find light text on dark backgrounds harder to read. Offer it as a choice, keep contrast high in both modes, and pair it with real accessibility tools.

More from ExtenderX

ExtenderX replaces several single-purpose plugins: Gutenberg block animations, maintenance and coming soon mode, header and footer code, a sticky header, back to top, announcement bar and more. ExtenderX Pro adds smooth scrolling, a preloader, cookie consent, a countdown banner and 16 more seasonal effects, from $19.99 a year.

Common Questions

Install ExtenderX, go to ExtenderX → Site Enhancements → Appearance and switch on Dark Mode. Visitors get a floating button to switch between light and dark. It uses the DarkReader engine, so it works with any theme without writing dark styles yourself.

Yes, with a plugin that generates the dark version automatically. ExtenderX uses DarkReader, which recalculates colours on the fly, so classic and block themes both work. Check logos and images afterwards.

It helps some visitors — people sensitive to bright screens or reading at night — and makes no difference or is harder for others. That's why a toggle is better than forcing dark mode on everyone.

An automatic dark mode does some work in the browser to recolour the page. ExtenderX loads it only when the feature is enabled; disabled features add no CSS or JavaScript.

Dark logos on transparent backgrounds can disappear on a dark page. Use a logo with a light outline, a version on a solid background, or a dedicated dark-mode plugin that swaps images.

For a free toggle alongside other site tools, ExtenderX. For a dark-mode-only plugin with many switch styles, presets, scheduling and image replacement, WP Dark Mode offers those in its paid Ultimate version.

Get new guides and releases by email

Occasional emails when we publish a guide or ship a notable plugin update. No spam — unsubscribe any time.

We only use your email to send these updates. See our privacy policy.