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.
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: 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.
The dot is not optional. The field takes CSS selectors, not class names. Typing
herowithout 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.
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.
