21 lines
1.4 KiB
Markdown
Executable File
21 lines
1.4 KiB
Markdown
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 →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle) |