---
title: "How to Exclude Elements from Dark Mode in Elementor?"
url: https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/
date: 2024-02-22
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "Dark mode is meant to change the page, but not all of it. A photograph, a brand logo or a carefully designed hero section usually looks worse inverted, especially with..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Exclude-Elements-from-Dark-Mode-in-Elementor_-1024x536.jpg
word_count: 800
---

# How to Exclude Elements from Dark Mode in Elementor?

## 

- The Plus Addons for Elementor Dark Mode widget excludes elements by CSS class, and the class must be entered with a leading dot, such as .hero.
- The Plus Ignore Class Default is on by default and protects Elementor's Image widget, image tags, hotspot, animated image, parallax image, before/after elements, and thumbnail areas in team, product, gallery, and blog listings.
- Mix Blend dark mode leaves a test container with the class .hero on its light background while the rest of the page inverts to black around it.
- Ignore Dark Mode stays hidden until it is turned on in the Dark Mode widget, and matching elements receive theplus-darkmode-ignore when the page loads.

Dark mode is meant to change the page, but not all of it. A photograph, a brand logo or a carefully designed hero section usually looks worse inverted, especially with the **Mix Blend** type, which blends a layer over everything without asking.

The **Dark Mode** widget in The Plus Addons for Elementor lets you name the things it should leave alone, by CSS class. 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:** the element you want to protect needs a CSS class you can name. Elementor puts that field in **Advanced > CSS Classes** on every widget and container.

## Steps

- Select the widget or container you want left alone. Open its **Advanced** tab and type a class name into **CSS Classes** - `hero`, for example.- Select the **Dark Mode** widget and open the **Extra Option** section in the **Content** tab.- Turn **Ignore Dark Mode** on. Two more fields appear.- In **Ignore Dark Mode Classes**, type the class **with a dot** in front: `.hero`. Separate several with commas, like `.hero, .logo, .chart`.- Leave **The Plus Ignore Class Default** on unless you have a reason not to. It adds a built-in list of image and listing elements to the exclusion.

![Extra Option, with the Ignore Dark Mode Classes field highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-ignore-classes.webp)

> *The dot is not optional. The field takes CSS selectors, not class names. Typing hero without the dot was tested and the element was not* excluded - it went dark with everything else, and nothing warned about it.

## What you get on the page

On a test page, a container given the class `hero` and listed as `.hero` stayed on its light background after the switch was clicked, while the rest of the page inverted to black around it.

![Dark mode on with the hero container excluded: the top of the page stays light while the rest inverts.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-result-ignore.webp)

## What The Plus Ignore Class Default covers

This switch is on out of the box. It adds a fixed list of selectors to the exclusion for you, so that images and listing thumbnails are protected without any work. It covers Elementor's own **Image** widget and image tags, The Plus Addons' hotspot, animated image, parallax image and before/after elements, and the thumbnail areas of the team, product, gallery and blog listings.

## Settings used here

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Ignore Dark Mode** | Reveals the two fields below | Off |
| **Ignore Dark Mode Classes** | Comma-separated CSS selectors to leave untouched, each with a leading dot | empty |
| **The Plus Ignore Class Default** | Also excludes a built-in list of image and listing elements | On |

## How it behaves

- Matching elements are given the class **theplus-darkmode-ignore** when the page loads, and the dark-mode stylesheet skips anything carrying it.- It works the same for both **Type** values, but it matters most with **Mix Blend**, where the whole page is otherwise inverted.- Exclusions are applied by CSS selector, so you can exclude by any selector the browser understands - a class is simply the easiest one to add from Elementor.

## Limitations

- **A class name without a leading dot does nothing.** There is no warning and no error; the element just goes dark.- **The exclusion list lives on the Dark Mode widget, not on the element.** If the widget is in your header template, every page's exclusions are listed in that one field.- **The built-in list is fixed.** You can turn **The Plus Ignore Class Default** on or off, but you cannot edit what it contains.

## Troubleshooting

### The element still goes dark

Check that the class in **Ignore Dark Mode Classes** has a dot in front, and that the same class really is in the element's **Advanced > CSS Classes** field.

### The fields are not there

**Ignore Dark Mode** has not been switched on. Both fields are hidden until it is.

### My images are already excluded and I did not do anything

**The Plus Ignore Class Default** is on by default and already covers Elementor's Image widget.

### I excluded a container but the text inside it still inverts

Add the class to the specific widget as well. Excluding a parent is not guaranteed to cover every child - that combination was not tested.

## Not verified

So you know exactly what has and has not been checked:

- Only one exclusion, on one container, was tested. Several classes at once, nested exclusions and excluding a single widget inside an included container were not.- **The Plus Ignore Class Default** was never switched on with real The Plus Addons widgets on the page. The list of what it covers was read from the plugin, not seen working.- Exclusions were only tested with **Type** set to **Mix Blend**.

## 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/)

## Frequently Asked Questions

**Q: Why does an element still go dark after I add it to the exclusion list?**
A: The usual miss is the dot. The Dark Mode widget expects CSS selectors, so the class must be written as .hero, not hero. The same class also has to exist in the element’s Advanced > CSS Classes field. The page says a class without the leading dot was tested and the element still inverted, with no warning, so this is the first thing to check when exclusions fail.

**Q: What do I need before I can exclude elements from dark mode in Elementor?**
A: The setup is simple: Elementor free must be installed and active, and The Plus Addons for Elementor has to be installed and activated too. The page also says nothing here needs Pro. On top of that, the widget or container you want to protect needs a CSS class in Advanced > CSS Classes, because the exclusion works by selector rather than by picking elements visually.

**Q: Does the built-in ignore list already protect images and listing thumbnails?**
A: The Plus Ignore Class Default is on by default, and that matters because it already excludes a fixed set of image and listing selectors. It covers Elementor’s Image widget, image tags, and The Plus Addons elements like hotspot, animated image, parallax image, and before/after, plus thumbnail areas for team, product, gallery, and blog listings. That means many common visuals stay untouched without extra classes.

**Q: Should I leave The Plus Ignore Class Default on or turn it off?**
A: Leaving it on is the safer default because it protects common image and listing elements automatically. Turn it off only if you have a specific reason to override that built-in exclusion list. The important limitation is that the list is fixed: you can switch it on or off, but you cannot edit what it contains. That makes it useful for standard layouts but less flexible for custom exclusion rules.

**Q: Why does text inside an excluded container still invert?**
A: Excluding a parent container does not guarantee every child will stay untouched. The page calls out that a container was excluded but its text still inverted, so the fix is to add the class to the specific widget as well. That behavior was not fully tested for every nested case, which is why child widgets can still need their own exclusion selector.

**Q: What happens when dark mode exclusions are applied on the page?**
A: Matching elements get the class theplus-darkmode-ignore when the page loads, and the dark-mode stylesheet skips anything carrying it. That works for both Type values, but it matters most with Mix Blend because that mode blends over everything unless something is excluded. In practice, this keeps selected parts like logos or hero sections from being flattened into the inverted page look.