Files
dotjuice-plugin-docs/marketing/dotjuice-elementor-tools/widgets/dark-mode-toggle.md

1.4 KiB
Executable File

A one-click, site-wide dark mode switch that works with the colours you've already set in Elementor — no separate stylesheet, no custom code.

The problem it solves

Dark mode is one of the most-requested features on modern websites, but building it properly usually means maintaining a whole second stylesheet, or wiring up custom CSS variables by hand across every template. That's a lot of work for something that should be simple.

How it helps

Dark Mode Toggle works directly with Elementor's own global colours — no extra setup, no duplication. Add the toggle anywhere on your site, choose a dark palette, and one click flips every page into dark mode instantly. The choice is remembered for that visitor on their next visit too.

It supports both of Elementor's colour systems:

  • Classic Global Colors (Primary, Secondary, Text, Accent) that traditional widgets use
  • Elementor 4.x global variables used by the latest atomic widgets

Real sites are a mix of the two, so the toggle remaps both at once — your dark mode stays complete as you build with newer Elementor widgets.

The result

A genuine site-wide dark mode, built entirely from colours you already control through Elementor, future-proofed for the newer widget system, with nothing extra to maintain.

View full documentation →