---
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-09-21
lang: en
author: "Aditya Sharma"
description: "Mix Blend is the quick way to get dark mode. Instead of giving every element a second colour, the widget paints one full-screen layer over the page and blends it..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/How-to-Add-Mix-Blend-Dark-Mode-in-Elementor_-1-1024x536.jpg
word_count: 755
---

# How to Add Mix Blend Dark Mode in Elementor?

## 

- The Plus Addons for Elementor Dark Mode widget uses Mix Blend to paint one full-screen layer over the page, so one setting changes the whole page at once.
- Style 1 shows the Mix Blend Mode dropdown, and the shipped default is Difference, which inverts a white page into a classic dark look.
- Mix Blend Mode offers eleven CSS values: Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue and saturation.
- Images are inverted along with everything else, and the post says photos, logos and screenshots usually look wrong unless they are excluded with Ignore Dark Mode in Extra Option or The Plus Ignore Class Default.

Mix Blend is the quick way to get dark mode. Instead of giving every element a second colour, the widget paints one full-screen layer over the page and blends it with what is underneath. One setting, and the whole page changes at once.

This page covers the **Mix Blend** type of the **Dark Mode** widget in The Plus Addons for Elementor: where the settings are, what each blend mode does, and the two things that catch people out. 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.- **Where to put it:** in a header or footer template if you want the switch on every page; otherwise just on the page you are working on.

## Steps

- Add the **Dark Mode** widget.- In the **Content** tab, open **Layout** and leave **Type** on **Mix Blend**. That is the shipped default.- Leave **Style** on **Style 1**. The blend setting is only shown for this style.- Choose a **Mix Blend Mode**. It ships on **Difference**, which inverts the page.- Optionally set a **Background Color**. This is the colour the layer blends with, so it changes the result of every mode.

![The Dark Mode widget's Layout section, with the Type dropdown highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-layout-type.webp)

## The blend modes

**Mix Blend Mode** offers eleven values: **Difference**, **multiply**, **screen**, **overlay**, **darken**, **lighten**, **color-dodge**, **color-burn**, **exclusion**, **hue** and **saturation**. They are the standard CSS blend modes, so the result depends on both the mode and the **Background Color** you pair it with.

> ***Difference** with the default white background is the one that gives you a classic inverted dark page. Other modes are worth trying for a tinted look, but some combinations - multiply over a white page, for one - leave the page looking unchanged. That is how the blend mode works, not a fault in the widget.*

## What you get on the page

On a test page with a white background, the default **Difference** blend took every sampled pixel from white to black the moment the switch was clicked.

![The test page before the switch: light background, switcher in the bottom right.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-result-light.webp)

![The same page after the switch with Type set to Mix Blend: every sampled pixel went from white to black.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-result-dark.webp)

The elements themselves were untouched - heading, paragraph and container all kept their original colours. Everything you can see is the blend layer on top. That is the whole trick, and it is also why photographs come out looking wrong.

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

## Settings used here

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Type** | Mix Blend paints a blended layer over the page | Mix Blend |
| **Style** | The switcher design. Mix Blend Mode is only shown on Style 1 | Style 1 |
| **Background Color** | The colour the layer blends with | empty (white) |
| **Mix Blend Mode** | Which CSS blend mode to use | Difference |

## Limitations

- **Mix Blend Mode is hidden unless Style is Style 1.** On **Style 2** the dropdown is replaced by **Animation Time**. If you cannot find the blend setting, this is why.- **Images are inverted along with everything else.** Photos, logos and screenshots usually look wrong. Exclude them - see the related doc below.- **It does not recolour anything.** Every element keeps its own colours underneath the layer, so you cannot fine-tune one heading's dark-mode colour. If you need that, use the **Global Color** type instead.- **Some blend modes do nothing on a plain white page.** Pair them with a **Background Color** to see an effect.

## Troubleshooting

### The Mix Blend Mode dropdown is missing

**Style** is on **Style 2**, or **Type** is on **Global Color**. The dropdown needs **Mix Blend** plus **Style 1**.

### Nothing visible changes when I click the switch

The blend mode you chose may be a no-op against your page colours - multiply over white is the common case. Go back to **Difference**, or set a **Background Color**.

### My images look like negatives

Expected with **Difference**. Turn on **Ignore Dark Mode** in **Extra Option** and exclude them, or leave **The Plus Ignore Class Default** on, which already covers Elementor's Image widget.

## Not verified

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

- Nine of the eleven blend modes were never rendered. Only **Difference** and **multiply** were put on a page; the rest are listed from the plugin.- **Animation Time** on **Style 2** was only checked far enough to confirm it reaches the page; the animation itself was not examined.- No test with a dark page design underneath - the fixture was a light page throughout.

## Related Docs

- [Dark Mode Widget: Settings Overview](https://theplusaddons.com/docs/dark-mode-widget-settings-overview/)- [How to Exclude Elements from Dark Mode in Elementor?](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/)- [How to Set the Global Colors in Dark Mode?](https://theplusaddons.com/docs/set-the-global-colors-in-dark-mode/)

## Frequently Asked Questions

**Q: What do I need before using Mix Blend dark mode in Elementor?**
A: Elementor free needs to be installed and active, and The Plus Addons for Elementor has to be installed and activated too. The page also says the Dark Mode widget itself must be turned on under The Plus Addons > Widgets. That matters because Mix Blend is just one type inside the widget, not a separate feature. If you want the switch on every page, place it in a header or footer template; otherwise, add it only to the page you are working on.

**Q: Why does Difference create the classic inverted dark mode look?**
A: Difference is the default Mix Blend Mode, and with the default white background it flips sampled pixels from white to black. That is why it produces the classic inverted dark page effect. The important detail is that the result depends on both the blend mode and the Background Color, so Difference is the safest starting point when you want a clear dark-mode transformation instead of a tinted effect.

**Q: Which blend mode should I use if I want a tinted dark mode instead of a full inversion?**
A: The other CSS blend modes are better for tinted looks, but they behave differently depending on the page colors and Background Color. The page lists eleven values: Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue and saturation. A practical rule from the tutorial is that some combinations can look unchanged on a plain white page, so pairing the mode with a Background Color is what makes the effect visible.

**Q: Why does nothing change when I click the dark mode switch?**
A: That usually means the blend mode you picked is a no-op against your current page colors. The page calls out multiply over white as the common example of an effect that can look unchanged. The fastest fix is to go back to Difference or set a Background Color so the layer has something meaningful to blend with. In other words, this is often a color-math issue, not a broken widget.

**Q: Why do my images look like negatives in Mix Blend dark mode?**
A: That happens because Mix Blend affects everything under the layer, including photos, logos and screenshots. With Difference on a light page, images get inverted along with text and containers, which is why they can look wrong. The tutorial says to exclude them using Ignore Dark Mode in Extra Option, or leave The Plus Ignore Class Default on since it already covers Elementor’s Image widget.

**Q: Should I use Mix Blend or Global Color for dark mode styling?**
A: Mix Blend is best when you want one full-screen layer to change the whole page at once. It does not recolour individual elements, so headings keep their original colors underneath the layer. If you need fine control over specific element colors in dark mode, Global Color is the better choice. That split matters because Mix Blend gives speed and simplicity, while Global Color gives per-element control.