Dark Mode Toggle

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.

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.

Content settings

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.

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.

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.

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.
• 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.