---
title: "How to Set the Global Colors in Dark Mode?"
url: https://theplusaddons.com/docs/set-the-global-colors-in-dark-mode/
date: 2024-05-14
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Set-the-Global-Colors-in-Dark-Mode_-1024x536.jpg
word_count: 893
---

# How to Set the Global Colors in Dark Mode?

## 

- The Plus Addons for Elementor Dark Mode widget uses Type = Global Color to swap Elementor global colours with darker values instead of inverting the page.
- Elementor Site Settings > Global Colors must already contain saved colours, and page elements must use those global colours or they do not change.
- The Global Color section shows four rows, primary, secondary, text, and accent, and row order matches the palette by position, not by label.
- Hard-coded colours and images stay unchanged, while a row with no colour set is skipped and custom global colours added with + Add Item require the same order as Site Settings.

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](https://theplusaddons.com/docs/dark-mode-widget-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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dark-mode-switcher/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Free**. Nothing on this page needs Pro.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/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](https://elementor.com/help/how-do-i-set-global-fonts-and-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 Global Color section with its four rows, shown when Type is set to Global Color.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-global-color.webp)

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

![The same page with Type set to Global Color: the background and text take their dark shades and nothing is inverted.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-result-globalcolor.webp)

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.

## Related Docs

- [Dark Mode Widget: Settings Overview](https://theplusaddons.com/docs/dark-mode-widget-settings-overview/)- [How to Add Mix Blend Dark Mode in Elementor?](https://theplusaddons.com/docs/mix-blend-dark-mode-in-elementor/)- [How to Exclude Elements from Dark Mode in Elementor?](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/)

## Frequently Asked Questions

**Q: What do I need before setting global colors in dark mode?**
A: Elementor’s global colors have to be saved first under Site Settings > Global Colors, and the page elements need to be using those palette colors. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH only swaps color values that come from that palette, so hard-coded picker colors stay unchanged. This tutorial also uses the free edition, with Elementor free installed and active.

**Q: Why does the page turn black instead of switching to my dark colors?**
A: That usually means the Elementor palette is empty. In this setup, the widget has nothing to swap, so it falls back to inverting the page instead of applying Global Color values. Saving your colors in Site Settings > Global Colors fixes the input the widget needs, then reloading lets the dark-mode values take over.

**Q: Why do some elements change color while others stay the same?**
A: Only elements that use Elementor global colors will update. Anything colored manually with the picker is outside the palette swap, so it keeps its original value in dark mode. That is why a heading or button can change while a label or icon stays fixed if it was hard-coded rather than pulled from Site Settings > Global Colors.

**Q: What happens if the global color rows are in the wrong order?**
A: The wrong things change color because row position is what matters, not the label text. Row one replaces your first global color, row two replaces the second, and so on. If you add custom global colors with + Add Item, keep that order aligned with Site Settings > Global Colors or you will recolor the wrong parts of the page.

**Q: Is there a better choice than Global Color if I want a fully inverted dark mode?**
A: Global Color is not an inversion effect at all. It swaps saved palette values and leaves everything else alone, which is why it looks designed instead of flipped. If you want a true blend-style effect, this page points to [How to Add Mix Blend Dark Mode in Elementor?](https://theplusaddons.com/docs/mix-blend-dark-mode-in-elementor/) and the [Dark Mode Widget: Settings Overview](https://theplusaddons.com/docs/dark-mode-widget-settings-overview/) for the rest of the widget options.

**Q: Does this dark mode method affect images or logos?**
A: Images are not affected by this type, because Global Color only changes color values tied to Elementor’s palette. That usually helps preserve photos and layout assets instead of tinting everything on screen. One gotcha from the page is that a bright white logo will stay bright white unless it is part of something that uses a global color.