jandieman/dotjuice-plugin-docs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark Mode Toggle docs: Elementor 4.x global variables support

Browse Source 
Update the user doc and marketing blurb to cover the new Both/Legacy/
Variables colour-system choice and support for Elementor 4.x named
global variables alongside the classic four Global Colors.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Johan
2026-07-22 16:49:47 +00:00
parent 301216d9b2
commit d53984c3b3
2 changed files with 38 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
marketing/dotjuice-elementor-tools/documentation/marketing/widgets/dark-mode-toggle.md
View File

@@ -1,6 +1,6 @@
# Dark Mode Toggle
A one-click, site-wide dark mode switch — using the color palette you've already built in Elementor.
A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
## The problem it solves
@@ -8,10 +8,17 @@ Dark mode is one of the most-requested features on modern websites, but building
## How it helps
Dark Mode Toggle works directly with Elementor's own Global Colors — the primary, secondary, text, and accent colors you've already set up as part of your site's design. Add the toggle anywhere on your site, choose a dark palette for each of those four global colors, and clicking it switches your entire site into dark mode instantly, remembered for that visitor on their next visit too.
Dark Mode Toggle works directly with Elementor's own global colours — no separate stylesheet, no custom code. Add the toggle anywhere on your site, choose a dark palette, and one click flips your entire site into dark mode instantly, remembered for that visitor on their next visit too.
Crucially, it speaks **both** of Elementor's colour systems:
- The **classic Global Colors** (Primary, Secondary, Text, Accent) that traditional widgets use.
- The **newer Elementor 4.x global variables** used by the latest atomic widgets.
Real sites are increasingly a mix of the two, so the toggle can remap both at once — meaning your dark mode stays complete as you build with newer Elementor widgets, not just the old ones.
## The result
A genuine site-wide dark mode, built entirely from colors you already control through Elementor — no separate stylesheet to maintain.
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.
*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's Global Colors throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
*Note: this widget relies on your theme and Elementor Kit consistently using Elementor's global colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*