Inverting a page is quick, but it is a blunt instrument. If you want dark mode to look designed rather than flipped, the Global Color type is the one to use: you give each of your Elementor global colours a second, darker value, and the widget swaps them when the visitor flicks the switch.
Nothing is blended and nothing is inverted – only the colour values change, and only for elements that actually use a global colour. For the rest of the widget, see the full Dark Mode settings overview.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free. Nothing on this page needs Pro.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Dark Mode and turn its toggle on.
- Prerequisite, and this one is not optional: your Elementor global colours must already be saved under Site Settings > Global Colors. If that palette is empty the widget outputs nothing at all and the page is inverted instead.
- Prerequisite: the elements on your pages have to be using those global colours. Anything with a hand-picked colour will not change.
Steps
- Set your light-mode palette first, in Elementor’s Site Settings > Global Colors, and use those colours in your page design.
- Add the Dark Mode widget – to a header or footer template for the whole site, or to a single page.
- In the Content tab, open Layout and set Type to Global Color.
- A Global Color section appears. Open it. It holds four rows, labelled primary, secondary, text and accent.
- Open each row and set its Color to the dark-mode value you want for the matching global colour. The Label field is just a name for the row.
The rows are matched to your palette by position. Row one replaces your first global colour, row two the second, and so on. Renaming a row changes nothing. If you have added custom global colours, use + Add Item and keep the order the same as in Site Settings.
What you get on the page
On a test page whose heading, body text, button and section background all used global colours, clicking the switch swapped all four values at once:
| Global colour | Light | Dark |
|---|---|---|
| primary (heading) | #1B2A4A | #E8EAF2 |
| secondary (section background) | #F3F5FA | #101826 |
| text (paragraph) | #333333 | #C7CEDB |
| accent (button) | #2E7DF7 | #6FA8FF |
Every element using one of those colours followed it, and nothing else on the page moved. The button’s own label colour, which had been picked by hand rather than taken from the palette, stayed exactly as it was – a good illustration of the rule.
And the same page once the dark values are in place and the switch is thrown:
Settings used here
| Setting | What it does | Default |
|---|---|---|
| Type | Global Color swaps palette values instead of blending | Mix Blend |
| Global Color (repeater) | One row per global colour, in the same order as Site Settings | 4 rows |
| Label | A name for the row; has no effect on matching | Label |
| Color | The dark-mode value for that global colour | empty |
How it behaves
- The widget writes one rule that redefines your global colour variables while the page carries the dark-mode state, so every element using them updates together.
- It also forces the blend layer to be transparent, which is why nothing is inverted with this type – the two approaches do not stack.
- A row with no colour set is skipped, so you can convert part of your palette and leave the rest alone.
Limitations
- An empty Elementor palette makes this do nothing. If no global colours have ever been saved on the site, the widget outputs no rule at all, the blend layer is never switched off, and the page is inverted as if you had chosen Mix Blend. Nothing in the editor warns you.
- Hard-coded colours are not touched. Any element whose colour was picked from the colour picker rather than the palette keeps that colour in dark mode.
- Order matters, labels do not. A row out of sequence recolours the wrong thing.
- Images are not affected either way. This type does not change photos, which is usually what you want, but a bright white logo will stay bright white.
Troubleshooting
The page just goes black instead of using my colours
Your Elementor palette is empty, so the widget falls back to inverting the page. Save your colours under Site Settings > Global Colors and reload.
Some elements change and others do not
The ones that did not change are not using a global colour. Open each and set its colour from the palette instead of the picker.
The wrong things changed colour
The rows are out of order. Line them up with the order in Site Settings > Global Colors.
The Global Color section is not in the panel
Type is still on Mix Blend. The section only appears for Global Color.
Not verified
So you know exactly what has and has not been checked:
- Only the four system colours were tested. Custom global colours added with + Add Item were not.
- Everything was tested on a single page. The widget inside a header or footer template, across several pages, was not.
- No test with a theme that supplies its own colours outside Elementor’s palette.
- The behaviour when a row is deliberately left blank was reasoned from the plugin, not rendered.
