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.