Dark mode plugin for Elementor

Add dark mode with Elementor Global Colors, without rebuilding your site.

Map your key colors, preview real pages, and ship a polished WordPress dark mode experience that feels native on the frontend instead of patched in after launch.

Map first Start from the palette the site already uses.
Preview before publish Check the result on real layouts, not guesses.
Drop the switch Give visitors a toggle that looks native.

A dark mode plugin can be a design tool, not just a darker skin.

The value is not only the switch itself, but the control behind it: how the palette feels, how the toggle is named, how presets shape different moods, and how the same system can support seasonal variations, branded atmospheres, or more accessible colour strategies for people who read colour differently.

This plugin came from a simple frustration: we could find dark mode tools, but not one that gave us the exact match we wanted when building a site with strong visual convictions. Once you have full control over the palette, presets, automation, and the wording of the toggle itself, it stops being only a dark mode feature. It becomes a theming layer you can bend toward calmer nights, more editorial moods, seasonal identities, branded client experiences, or even alternate versions that help when content needs to stay clearer for people with colour blindness. That freedom is the real point.

How the dark mode plugin works with Elementor

Once the plugin is installed on WordPress, it reads the predefined Elementor Global Colors already used in your site, lets you map their darker counterparts, and gives you this preview as a quick visual sample before you publish the real result.

Dark Mode Plugin for Elementor branding
Dark Mode Plugin for Elementor

Preview the dark mode setup on real layouts before you publish it to visitors.

Global ColorsDark mapping
Primary#FFFFFF
→
Secondary#60688A
→
Text#1B1B33
→
Accent#FF0088
→
Custom color 01#7C72D8
→
Custom color 02#3ECF8E
→
Home
Slow Living Store
ShopCollectionsAboutCart
Curated products

Thoughtful pieces for a calmer home.

Preview your mapped palette on a boutique-style homepage.

Shop nowView journal
Zen incense tray$48
Beauty ritual set$72
Sport recovery bottle$26

Built for the people who design, ship, and maintain Elementor sites.

It fits freelancers, agencies, in-house teams, and also the people learning how to build a site with a stronger visual system in the first place. If you care about shaping a more intentional palette, understanding how a design translates into darker states, and giving visitors a switch that feels considered rather than generic, this plugin gives you more room to learn, refine, and ship.

01 · Global Color mapping

Start from Elementor Global Colors, then shape a darker version without rebuilding the design system.

The mapping view gives you a clear starting point for Elementor Global Colors dark mode: adjust the colour logic once, check the result quickly, and keep the setup readable as the project grows.

Dark Mode Plugin mapping workflow screenshot
02 · Widget

Place a real switch inside Elementor and keep the visitor interaction native from the start.

The widget feels familiar in the builder and gives the site a cleaner handoff from setup to frontend use.

Dark Mode Plugin Elementor widget screenshot
03 · Shortcode fallback

Keep a shortcode fallback ready for layouts where a widget is not the cleanest option.

It covers template zones, older structures, and placements where a widget is not the cleanest option, so the setup stays flexible instead of fragmented.

Dark Mode Plugin shortcode screenshot
04 · Presets

Save approved dark mode states and bring them back without rebuilding the same setup again.

Presets make iteration lighter during client work, testing, and refinements, especially when the same site needs several visual directions before a final choice.

Dark Mode Plugin presets screenshot
05 · Automation

Let dark mode react to visitor context instead of behaving like a simple manual toggle.

Automation adds rhythm to the experience, whether the site should respect a saved choice, follow a preference, or switch on a deliberate schedule.

Dark Mode Plugin automation screenshot
06 · Transitions

Control the transition so the change in state feels smooth, deliberate, and visually coherent.

Those details matter on polished sites: they help the switch feel intentional in motion instead of looking like a technical change happening in the background.

Dark Mode Plugin transitions screenshot
07 · Logo replacement

Swap branding assets in dark mode so headers and hero areas stay visually coherent.

When the main palette changes, the logo often needs the same attention. This keeps branded sections looking finished instead of merely acceptable.

Dark Mode Plugin logo replacement screenshot
08 · Exclusions

Handle the exceptions cleanly when a page or area should stay outside dark mode.

Exclusions help preserve the main setup while giving you a controlled way to deal with special pages, compatibility constraints, or deliberate design exceptions.

Dark Mode Plugin exclusions screenshot

Dark mode plugin pricing

Start free, then choose Annual or Lifetime depending on how you buy software and how many WordPress sites you need to cover.

Annual

Pro 1 Site

$19 / year
1 site

Perfect for personal sites and single-project launches.

  • Presets management
  • Import/export
  • Advanced preview workspace
  • Advanced automation
  • Advanced transitions
  • Theme transition bypass
  • Dark logo management
  • Advanced widget styles/options
  • Future license-connected features
Choose Annual 1 Site
Annual

Pro Unlimited

$69 / year
Unlimited sites

Built for agencies and teams shipping dark mode at scale.

  • Presets management
  • Import/export
  • Advanced preview workspace
  • Advanced automation
  • Advanced transitions
  • Theme transition bypass
  • Dark logo management
  • Advanced widget styles/options
  • Future license-connected features
Choose Annual Unlimited

Questions about this WordPress dark mode plugin

Short answers to the buying, setup, and accessibility questions teams usually ask before they install a dark mode plugin for Elementor or upgrade to Pro.

How do I add dark mode with Elementor?

Start by mapping Elementor Global Colors to a darker palette, preview the result on real layouts, then place a visitor-facing switch where it fits the design.

Is this a dark mode plugin for Elementor?

Yes. Dark Mode Plugin for Elementor adds a visitor-facing dark mode layer on top of Elementor without forcing you to redesign every section manually.

Is this a dark mode plugin for WordPress?

Yes. The Free plugin is available on WordPress.org, while Pro licenses, account access, and paid downloads are handled on darkmodeplugin.com.

Can I create dark mode for Elementor without redesigning every page?

That is the main goal. The plugin is built around Elementor Global Colors so you can centralize the dark mode conversion instead of rebuilding each page one by one.

Do I need Elementor Pro to use dark mode on my site?

No. The base plugin works with Elementor itself. Elementor Pro is not required to start mapping colors, testing the preview, or placing the switch on the frontend.

Does the plugin respect prefers-color-scheme?

Yes. Pro includes system-preference handling, so the darker version of the site can follow the visitor’s device preference instead of acting like a blind manual switch only.

Can this help with accessibility and contrast review?

The plugin is built to help you review mapped colour pairs on real pages, which makes it much easier to align the final experience with your own accessibility and contrast standards.

Why would my clients want a dark theme on their site?

A low-light experience can reduce eye strain at night, align with visitor device preferences, and make the site feel more modern and considered.

Can visitors switch between light mode and dark mode on WordPress?

Yes. The plugin includes an Elementor toggle widget and a shortcode fallback so visitors can switch between light and dark mode directly on the site.

Is Dark Mode Plugin suitable for client sites and agencies?

Yes. The licensing is designed for single websites, multi-site freelance work, and unlimited agency usage depending on the Pro license you choose.

Can I exclude specific pages from dark mode?

Yes. Pro includes exclusions and compatibility controls so you can keep dark mode away from specific URLs or templates when needed.

A cleaner setup for you, a better low-light experience for visitors.

Start with the free plugin, move to Pro when you need presets, automation, and broader site coverage, then ship a darker variant that still feels like part of the original design.