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

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>

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

@@ -4,9 +4,16 @@ Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
 
 ## How it works
 
-This widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps Elementor's four Global Color variables (Primary, Secondary, Text, Accent) to the dark-mode values you configure on the widget. It remembers the visitor's choice, so it stays applied on their next visit.
+This widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours to the dark-mode values you configure on the widget. It remembers the visitor's choice, so it stays applied on their next visit.
 
-**Important:** this widget only changes colors for elements styled using Elementor's Global Colors. If part of your design uses a hardcoded color instead of a Global Color, that part won't respond to dark mode.
+It works with **both** of Elementor's global-colour systems:
+
+- **Legacy 3.x global colours** — the four classic Global Colors (Primary, Secondary, Text, Accent) used by traditional Elementor widgets.
+- **Elementor 4.x global variables** — the named colour variables (e.g. `red`, `sea-green`) introduced with the newer atomic/v4 widgets, defined under **Site Settings → Global Variables**.
+
+Because modern pages often mix older widgets (which read the legacy colours) with newer atomic widgets (which read 4.x variables), the widget can override both at once from a single toggle.
+
+**Important:** this widget only changes colours for elements styled using a global colour or global variable. Anything using a hardcoded colour won't respond to dark mode — the more consistently your design uses global colours/variables, the more complete the effect.
 
 ## Content settings
 
@@ -19,16 +26,30 @@ This widget renders a small clickable icon. Clicking it adds a dark-mode class t
 
 ## Dark Mode Colors (Style tab)
 
-Four color fields — **Primary**, **Secondary**, **Text**, and **Accent** — define what your site looks like once dark mode is switched on. Set each to the dark equivalent of the matching Elementor Global Color. If you leave any of these blank, a sensible built-in dark default is used instead.
+At the top, **Global Colour System** decides which colour systems dark mode overrides:
+
+| Choice | What it does |
+|---|---|
+| **Both** *(default)* | Applies the legacy four colours **and** your chosen 4.x variable overrides together — best for pages that mix old and new widgets. |
+| **Legacy only** | Overrides just the four classic Global Colors. |
+| **Variables only** | Overrides just the 4.x global variables, leaving the legacy four untouched. |
+
+**Legacy 3.x global colors** — four colour fields (**Primary**, **Secondary**, **Text**, **Accent**) define the dark equivalent of each classic Global Color. Leave any blank to use a sensible built-in dark default.
+
+**Elementor 4.x global variables** — add a row for each variable you want to change in dark mode: pick the variable from the list of your site's global variables, then set its dark-mode colour. The dark value can be a plain colour, or a reference to one of your palette colours. Add as many rows as you need.
+
+> New variables you create *after* opening the editor won't appear in the list until you reload the editor, because Elementor builds the widget's options once when the editor loads.
 
 ## Setting it up
 
 1. Add the widget somewhere visible and consistent — a header or footer works well, so it's reachable from every page.
-2. Under the Style tab, set your four Dark Mode Colors to a palette that works well as a dark theme.
-3. Save and test: click the toggle on the live site and check that the elements using your Global Colors switch correctly.
+2. Under the Style tab, choose your **Global Colour System** (leave on **Both** if your site mixes widget types).
+3. Set your Legacy dark colours and/or add variable rows for a palette that works well as a dark theme.
+4. Save and test: click the toggle on the live site and confirm the elements using your global colours/variables switch correctly.
 
 ## Good to know
 
-- **Whichever toggle instance was clicked most recently determines the colors used site-wide.** If you place more than one Dark Mode Toggle widget with different color settings, the last one clicked "wins" for the whole site until another is clicked. For a single consistent dark mode, use the same color settings on every instance, or better, only place the widget in one shared location like your header.
+- **Whichever toggle instance was clicked most recently determines the colours used site-wide.** If you place more than one Dark Mode Toggle with different settings, the last one clicked "wins" for the whole site until another is clicked. For a single consistent dark mode, use the same settings on every instance, or place the widget in one shared location like your header.
+- If you change the widget's colour settings after already switching dark mode on, toggle it off and back on once (or clear the browser's site data) so it re-reads the new values — the last-used colours are cached in the browser for speed.
 - You can deep-link directly into dark mode by adding `?dark=0` to any URL (or `?dark=1`, `?dark=2`, etc. if there's more than one toggle instance on that specific page) — useful for sharing a dark-mode preview link.
 - The dark mode choice is remembered per browser (not per WordPress account), so it persists across visits on the same device but doesn't follow a visitor between devices.

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

@@ -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.*