---
title: "How to Add Mix Blend Dark Mode in Elementor?"
url: https://theplusaddons.com/docs/mix-blend-dark-mode-in-elementor/
date: 2024-02-22
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add a mix blend mode in Elementor? The mix blend mode mixes multiple colors using the CSS background blend mode to create unique and eye-catching visual..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Add-Mix-Blend-Dark-Mode-in-Elementor_-1-1024x536.jpg
word_count: 281
---

# How to Add Mix Blend Dark Mode in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Dark Mode widget allows users to change the website color scheme using mix blend mode.
- Users select Mix Blend from the Type dropdown under the Layout tab to apply the mix blend mode effect.
- Excluding images from dark mode is recommended to avoid adverse visual effects when using the mix blend mode.

Do you want to add a mix blend mode in Elementor? The mix blend mode mixes multiple colors using the [CSS background blend mode](https://www.w3schools.com/cssref/pr_background-blend-mode.php) to create unique and eye-catching visual effects on your website. 

With the Dark Mode widget from The Plus Addons for Elementor, you can easily change Elementor website color scheme with mix blend mode.

*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 **Mix Blend** from the **Type** dropdown, under the **Layout** tab.

![](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Dark-Mode-Mix-Blend-Mode.gif)

You can select a style for the dark mode swatch from the **Style** section.

From the **Background Color** section, you can add a background color to the page.

2. Then, from the **Mix Blend Mode** dropdown, you have to select the mix blend mode for the dark mode.

> *Note: The blend mode effect will change if you’ve set a background color from the ****Background Color**** section.*

> *Note: Make sure to [exclude images from dark mode](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/) while using the mix blend mode, because images can have adverse visual effects.*

Now, if you toggle the dark mode switcher, you’ll see a unique color scheme for your page based on the selected mix blend mode option and page elements.

![Dark Mode Mix Blend Demo](https://theplusaddons.com/wp-content/uploads/2024/02/dark-mode-mix-blend-demo.gif)

***Suggested Read: **[How to Exclude Elements from Dark Mode in Elementor](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/)*

## Frequently Asked Questions

**Q: What should I do if the mix blend mode isn't displaying correctly in Elementor?**
A: If the mix blend mode isn't showing as expected, ensure you've set a background color in the Background Color section. The blend mode effect will change based on this background setting. Additionally, check that you've selected the correct mix blend mode from the dropdown menu under the Layout tab.

**Q: What are the best practices for using mix blend mode in Elementor?**
A: When using mix blend mode, it's crucial to exclude images from dark mode to avoid adverse visual effects. You can learn how to exclude elements by checking the guide on [excluding elements from dark mode](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/). This ensures a cleaner and more visually appealing design.

**Q: Does the mix blend dark mode work with all Elementor themes?**
A: The mix blend dark mode feature is compatible with any Elementor theme, provided you have The Plus Addons for Elementor installed and activated. This flexibility allows you to enhance the visual appeal of your site regardless of the theme you choose.