---
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-04-09
lang: en
author: "Aditya Sharma"
description: "To provide the best dark mode experience to your visitors, you have to set the dark mode colors properly. With the Dark Mode widget from The Plus Addons for Elementor,..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Set-the-Global-Colors-in-Dark-Mode_-1024x536.jpg
word_count: 461
---

# How to Set the Global Colors in Dark Mode?

## 

- Customizes dark mode colors using the Dark Mode widget from The Plus Addons for Elementor.
- Sets Elementor global colors before applying them to layout elements and the Dark Mode widget.
- Maintains item sequence for dark mode global colors to avoid unexpected results.

To provide the best dark mode experience to your visitors, you have to set the dark mode colors properly.

With the Dark Mode widget from The Plus Addons for Elementor, you can easily customize the dark mode colors in Elementor.

*To check the complete feature overview documentation of The Plus Addons for Elementor Dark Mode widget, [click here.](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/elementor-dark-mode-switcher/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

1. First, you have to [set Elementor global colors](https://elementor.com/help/how-do-i-set-global-fonts-and-colors/#change-a-global-color). 

2. Then use the Elementor global colors in the layout elements.

3. After that, add the Dark Mode widget to the template (if you want to set dark mode on the entire site) or page.

> *Note: To create the template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.* 

4. Select **Global Color** from the **Type** dropdown, under the **Layout** tab.

5. Then, from the **Global Color** tab, you have to set the dark mode colors for your selected Elementor global colors. 

By default, you’ll find four repeater items same as available in the System Colors section of the Elementor Global Color options.

- The first repeater item will be the dark mode color of the primary color in the Elementor’s System Colors section.

- For instance, if we set the first repeater item color to black, it will replace the primary color in the dark mode.

- The second repeater item will be the dark mode color of the secondary color in the Elementor’s System Colors section.

- The third repeater item will be the dark mode color of the text color in the Elementor’s System Colors section.

- The fourth repeater item will be the dark mode color of the accent color in the Elementor’s System Colors section.

Here, the dark mode colors will be set based on the item sequence. 

This way, any item placed first will replace the primary color, the second item will replace the secondary color, and so on.

6. Open the first item. Here you can change the item label from the **Label** field, and in the **Color** section, you have to set the dark mode color.

Similarly, you have to add dark mode colors in the remaining repeater items.

You can click on the **+ Add Item** button to add more colors if you’ve added any custom colors in the Elementor Global Color options. 

> *Note: Make sure to maintain the same sequence for dark mode global colors and normal global colors. You might get unexpected results in dark mode if there is any mismatch in the sequence. *

Now your dark mode color will be set based on the item sequence and their respective colors.