f4838865c9
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>
69 lines
4.8 KiB
Markdown
Executable File
69 lines
4.8 KiB
Markdown
Executable File
# 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**.
|
|
|
|
|
|
*Screenshot: the widget selected in the editor with the **Icons** section open, showing the Normal/Dark icon pickers and colour controls.*
|
|
|
|
## How it works
|
|
|
|
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 widgets, defined under **Site Settings → Global Variables**.
|
|
|
|
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.
|
|
|
|
:::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 — Icons
|
|
|
|
| Setting | Default | What it does |
|
|
|---|---|---|
|
|
| **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
|
|
|
|
**Global Colour System** decides which colour systems the toggle overrides:
|
|
|
|
| Choice | What it does |
|
|
|---|---|
|
|
| **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 fall back to a sensible built-in dark default.
|
|
|
|
**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.
|
|
|
|
|
|
*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 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
|
|
|
|
- **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.
|