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

Docs pass: add widget screenshots and expand the user guides

Browse Source 
Add 21 screenshots across the Elementor Tools docs and rework the pages
around them: clearer opening lines, settings tables that state defaults,
and callouts for the parts people trip over. Also refreshes the Pro
getting-started, Custom Product Tabs and Product Filter pages, plus the
matching marketing copy.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Johan
2026-07-31 06:13:57 +00:00
parent 1d9b26b108
commit f4838865c9
43 changed files with 672 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,55 +1,68 @@
# Dark Mode Toggle
A front-end light/dark switch that recolours your site by overriding Elementor's global colours.
Found in the Elementor panel under **Dotjuice → Dark Mode Toggle**.
![The Dark Mode Toggle widget controls in the Elementor panel](../assets/img/dark-mode-toggle-controls.png)
*Screenshot: the widget selected in the editor with the **Icons** section open, showing the Normal/Dark icon pickers and colour controls.*
## How it works
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.
The widget renders a small clickable icon. Clicking it adds a dark-mode class to your entire site and swaps your global colours for the dark-mode values you configure on the widget. The choice is stored in the visitor's browser, so it survives navigation and returns on their next visit.
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**.
- **Elementor 4.x global variables** — the named colour variables (e.g. `red`, `sea-green`) introduced with the newer atomic 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.
Modern pages commonly mix older widgets (which read the legacy colours) with newer atomic widgets (which read 4.x variables), so 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.
:::caution The single most important thing to understand
Dark mode only changes elements styled with a **global colour or global variable**. Anything using a hardcoded hex value won't respond at all. If your toggle seems to "only half work", that's almost always the cause — the more consistently your design uses globals, the more complete the effect.
:::
## Content settings
## Content settings — Icons
| Setting | Default | What it does |
|---|---|---|
| **Light Mode Icon** | Moon icon | The icon shown when the site is currently in light mode (click to switch to dark). |
| **Dark Mode Icon** | Sun icon | The icon shown when the site is currently in dark mode (click to switch back to light). |
| **Icon Color / Hover Color** | — | Styling for the toggle icon itself. |
| **Icon Size** | — | Responsive sizing for the toggle icon. |
| **Normal Mode Icon** | Moon | Shown while the site is in light mode. Clicking it switches to dark. |
| **Dark Mode Icon** | Sun | Shown while the site is in dark mode. Clicking it switches back to light. |
| **Icon Color** | — | Colour of the toggle icon itself (not affected by dark mode). |
| **Hover Color** | — | Icon colour on hover. |
| **Icon Size** | 24px | Responsive — set a different size per breakpoint if needed. |
## Dark Mode Colors (Style tab)
## Dark Mode Colors
At the top, **Global Colour System** decides which colour systems dark mode overrides:
**Global Colour System** decides which colour systems the toggle 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. |
| **Both** *(default)* | Applies the legacy four colours **and** your 4.x variable overrides together. Best for pages mixing old and new widgets. |
| **Legacy only — Elementor 3.x** | Overrides just Primary, Secondary, Text and Accent. |
| **Variables only — Elementor 4.x** | Overrides just the global variables, leaving the classic 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.
**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 fall back to 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.
**Elementor 4.x global variables** — a repeater. Add one row per variable you want to change: pick the variable from your site's list, then set its dark-mode colour. Add as many rows as you need; variables you don't list keep their normal values.
> 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.
![The Dark Mode Colors section with variable override rows](../assets/img/dark-mode-toggle-colours.png)
*Screenshot: the **Dark Mode Colors** section showing the Global Colour System dropdown, the four legacy colour fields, and two or three variable override rows.*
:::note
New variables created *after* you opened the editor won't appear in the dropdown until you reload it — Elementor builds the widget's option list 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, 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.
1. Add the widget somewhere reachable from every page — a header or footer is the usual choice.
2. Choose your **Global Colour System**. Leave it on **Both** unless you know your site uses only one widget generation.
3. Set the legacy dark colours, and/or add a variable row for each global variable that needs a dark value.
4. Save, then click the toggle on the live site and check that everything using globals switches cleanly.
## Good to know
- **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.
- **The most recently clicked toggle determines the colours used site-wide.** If you place several toggles with different settings, the last one clicked wins until another is clicked. For consistency, either use identical settings everywhere or place a single toggle in a shared header.
- **Changed your colours after already switching dark mode on?** Toggle it off and on once, or clear the browser's site data. The last-used colours are cached in the browser for speed, so a stale set can linger.
- **You can deep-link into dark mode** by adding `?dark=0` to any URL — or `?dark=1`, `?dark=2` and so on where a page holds more than one toggle. Handy for sharing a dark-mode preview.
- **The preference is per browser, not per WordPress account.** It persists across visits on the same device but doesn't follow a visitor to another device or browser.