---
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-04-09
author: "Aditya Sharma"
description: "Implementing dark mode in your website can enhance the user experience and create a sleek, modern look. However, there may be certain elements such as images in your website design..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Exclude-Elements-from-Dark-Mode-in-Elementor_-1024x536.jpg
word_count: 348
---

# How to Exclude Elements from Dark Mode in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Dark Mode widget allows users to exclude specific elements from dark mode on their website.
- Users can add a class name in the CSS Classes field to specify which elements to exclude from dark mode.
- Enabling The Plus Ignore Class Default toggle excludes all The Plus Addons widgets and the default Elementor Image widget from dark mode at once.

Implementing dark mode in your website can enhance the user experience and create a sleek, modern look. However, there may be certain elements such as images in your website design that you do not want to be affected by dark mode especially while using the mix blend mode.

With the Dark Mode widget from The Plus Addons for Elementor, you can easily exclude elements from the dark mode on your Elementor website.

*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 its 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)

To do this, add the Dark Mode widget to the template and follow the steps -

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

1. Select the widget or container you want to exclude from dark mode.

2. Then go to the **Advanced** tab and add a class name in the **CSS Classes** field.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Dark-Mode-Section-CSS-Classes.png)

For instance, we’ve added a class named “hero”.

3. Then select the Dark Mode widget and select the appropriate dark mode type from the **Type** dropdown, under the **Layout** tab.

> *Note: In most cases, you have to exclude elements like images while using the Mix Blend type as images might not look good.*

4. After doing the necessary settings, enable the **Ignore Dark Mode** toggle from the **Extra Option** tab.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Dark-Mode-Ignore-Dark-Mode-CSS-Classes-1.png)

5. In the **Ignore Dark Mode Classes** field, you have to add the class name with a **dot (.)** in front. You can add multiple classes separated by a comma.

In our case, we’ll add the hero class like this** *.hero*.** 

By enabling **The Plus Ignore Class Default** toggle, you can easily exclude all The Plus Addons widgets and the default Elementor Image widget from dark mode at once.

Now, the specified class will be ignored in the dark mode.

**Suggested Read:** [How to Add Mix Blend Dark Mode in Elementor](https://theplusaddons.com/docs//mix-blend-dark-mode-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if the Ignore Dark Mode toggle isn't working?**
A: If the Ignore Dark Mode toggle isn't functioning as expected, ensure that you've correctly added the class name in the Ignore Dark Mode Classes field with a dot (.) in front. For instance, if your class is 'hero', it should be entered as '.hero'. This step is crucial as it tells the Dark Mode widget which elements to exclude from dark mode effects.

**Q: What is the best practice for excluding multiple elements from dark mode?**
A: To exclude multiple elements from dark mode, you can add multiple class names in the Ignore Dark Mode Classes field, separated by commas. This allows you to efficiently manage several elements at once, ensuring they all remain unaffected by dark mode settings.

**Q: What happens if I forget to add a class name for exclusion?**
A: If you forget to add a class name for exclusion, the specified elements will still be affected by dark mode. This can lead to unintended visual changes on your site, especially for images or specific sections that you intended to keep unchanged. Always double-check your class entries to avoid these issues.

**Q: Does the Dark Mode widget work with other page builders?**
A: The Dark Mode widget from The Plus Addons for Elementor is designed specifically for Elementor and does not work with other page builders like Gutenberg, Beaver Builder, or Divi. This means you need to ensure you are using Elementor to take advantage of this feature.

**Q: How do I create a template for excluding elements from dark mode?**
A: To create a template for excluding elements from dark mode, you can use either the free Nexter Builder or Elementor Pro. Once your template is set up, you can add the Dark Mode widget and follow the steps to exclude specific elements by adding class names in the settings.