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

Write marketing copy for all 16 widget marketing files with problem/solution framing and docs links

Browse Source
This commit is contained in:
Johan Koke
2026-08-03 06:04:28 +00:00
parent 256d7940f4
commit 53fa236fcc
16 changed files with 104 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,22 +1,21 @@
A one-click, site-wide dark mode switch — using the colour palette you've already built in Elementor.
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.
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 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.
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.
Crucially, it speaks **both** of Elementor's colour systems:
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
- 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.
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.
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 colours and variables throughout your design — the more consistently they're used, the more complete the dark mode effect will be.*
[View full documentation →](https://docs.dotjuice.co.uk/docs/dotjuice-elementor-tools/widgets/dark-mode-toggle)