---
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
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?

## Key Takeaways

- The Plus Addons for Elementor Dark Mode widget allows customization of dark mode colors in Elementor.
- Elementor global colors must be set before adding the Dark Mode widget to a template or page.
- Dark mode colors are configured based on a sequence of four repeater items corresponding to primary, secondary, text, and accent colors.

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.

## Frequently Asked Questions

**Q: What should I do if the dark mode colors aren't applying correctly?**
A: Ensure that the dark mode colors are set in the same sequence as the normal global colors. If there's a mismatch, you might see unexpected results in dark mode. For example, if you set the first repeater item for dark mode to black, it should correspond to the primary color in the normal global colors. Maintaining this sequence is crucial for proper application.

**Q: Can I set dark mode colors for specific pages instead of the entire site?**
A: Yes, you can add the Dark Mode widget to a specific page if you want to set dark mode colors just for that page. This flexibility allows you to customize the dark mode experience based on the content or design of individual pages while using The Plus Addons for Elementor.

**Q: What is the best practice for setting dark mode colors in Elementor?**
A: A best practice is to set the dark mode colors based on the sequence of the items in the Elementor global colors. The first repeater item should correspond to the primary color, the second to the secondary color, and so on. This ensures that the dark mode colors replace the correct elements in the layout, avoiding visual inconsistencies.

**Q: How do I add custom colors for dark mode in Elementor?**
A: You can add custom colors for dark mode by clicking the '+ Add Item' button in the Dark Mode widget settings. This allows you to include additional colors that you've defined in the Elementor Global Color options. Just remember to maintain the same sequence for these custom colors to ensure they apply correctly in dark mode.

**Q: What happens if I don't set the dark mode colors?**
A: If you don't set the dark mode colors, the default colors will be used, which may not provide the best experience for users who prefer dark mode. Properly customizing the dark mode colors enhances readability and visual appeal, making your site more user-friendly for visitors who switch to dark mode.

**Q: Is there a way to review all features of the Dark Mode widget?**
A: You can check the complete feature overview documentation of The Plus Addons for Elementor Dark Mode widget by [clicking here](https://theplusaddons.com/docs/dark-mode-widget-settings-overview/). This resource provides detailed insights into all the capabilities and settings available for optimizing dark mode on your site.