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

- Utilizes the Dark Mode widget from The Plus Addons for Elementor to implement mix blend mode effects.
- Requires installation and activation of The Plus Addons for Elementor to access the Dark Mode widget features.
- Instructs users to select Mix Blend from the Type dropdown under the Layout tab to apply mix blend mode settings.

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