---
title: "Dark Mode Widget: Settings Overview"
url: https://theplusaddons.com/docs/dark-mode-widget-settings-overview/
date: 2024-02-22
modified: 2026-09-21
lang: en
author: "Aditya Sharma"
description: "Dark mode gives visitors a low-light version of your site from a switch on the page. The Dark Mode widget in The Plus Addons for Elementor adds that switch and..."
image: https://theplusaddons.com/wp-content/uploads/2024/03/Dark-Mode-Widget_-Settings-Overview-1024x536.jpg
word_count: 1150
---

# Dark Mode Widget: Settings Overview

## 

- The Plus Addons for Elementor Dark Mode widget ships in the free plugin, and with Pro switched off the switcher still appears and the page still flips.
- Type controls the whole behavior: Mix Blend inverts the page with a full-screen blend layer, while Global Color swaps Elementor global colours for dark alternatives and changes only elements that use a global colour.
- Style 1 shows Mix Blend Mode, while Style 2 shows Animation Time, so the missing control depends on the selected switcher style.
- darkmode--activated is added to the page’s body element, and the visitor’s choice is remembered in browser local storage even when Save in Cookies is off.

Dark mode gives visitors a low-light version of your site from a switch on the page. The **Dark Mode** widget in The Plus Addons for Elementor adds that switch and does the recolouring for you, in one of two quite different ways.

This page walks through every setting in the widget and says which of them actually change what a visitor sees. Everything below was checked on a published page, not just read off the panel.

***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**. The whole widget ships in the free plugin; with Pro switched off the switcher still appears and the page still flips.- **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:** on one page, drop it on that page. To have the switch on every page, put it in a header or footer template - the widget's own panel recommends this.

![Screenshot: Where to put it: on one page, drop it on that page. To have the switch on every page, put it in a header or footer template - th](https://theplusaddons.com/wp-content/uploads/2024/02/Tpae-Dark-Mode-Activate-1024x344.png)

## Pick a type first

The first control in the **Layout** section is **Type**, and it decides everything else. It ships on **Mix Blend**.

- **Mix Blend** paints a full-screen layer over the page and blends it with what is underneath. Nothing in your design changes; the whole page is inverted at once. Quick to set up, and the reason images need excluding.- **Global Color** swaps Elementor's global colours for dark alternatives you choose. Nothing is inverted; only elements that use a global colour change. Slower to set up, far more control.

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

**Style**, just below, picks the look of the switch itself: **Style 1** or **Style 2**. It matters more than it looks, because two other controls depend on it: **Mix Blend Mode** only appears on **Style 1**, and **Animation Time** only on **Style 2**.

## Layout settings

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Type** | Mix Blend or Global Color | Mix Blend |
| **Style** | Which switcher design to use | Style 1 |
| **Background Color** | The colour the blend layer uses; feeds into the blend result | empty (white) |
| **Mix Blend Mode** | Difference, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, exclusion, hue, saturation. Shown on Style 1 only | Difference |
| **Animation Time** | 1 to 100; how long the switch takes. Shown on Style 2 only | empty (0.5s) |

## Position

The **Position** section pins the switch to the bottom right of the window. **Right Offset** and **Bottom Offset** are popovers holding a responsive **Right** slider (1-150 px, ships at **45**) and a **Bottom** slider (1-150 px or %, ships at **32**).

## Global Color

This section only appears when **Type** is **Global Color**. It holds one repeater with four rows, labelled **primary**, **secondary**, **text** and **accent**. Each row has a **Label** and a **Color**, and the colour you pick becomes the dark-mode value of the matching Elementor global colour.

![The Global Color section with its four rows, shown when Type is set to Global Color.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-global-color.webp)

> *The rows are matched to your global colours **by order, not by label**. The first row replaces the first global colour, the second the second, and so on. Renaming a row changes nothing. Use **+ Add Item** if you have custom global colours beyond the four system ones.*

## Extra Option

This section holds the behaviour switches and the exclusion list.

| Setting | What it does | Default |
| ------- | ------------ | ------- |
| **Save in Cookies** | Meant to remember the visitor's choice for their next visit | Off |
| **Auto Match OS Theme** | Follows the visitor's device or system theme | On |
| **Ignore Dark Mode** | Reveals the exclusion fields below | Off |
| **Ignore Dark Mode Classes** | Comma-separated CSS selectors to leave alone, each with a leading dot | empty |
| **The Plus Ignore Class Default** | Also excludes a built-in list of image and listing elements | On |

![Extra Option, with the Ignore Dark Mode Classes field highlighted.](https://theplusaddons.com/wp-content/uploads/2026/09/darkmode-ignore-classes.webp)

## What you get on the page

With **Type** on **Mix Blend** and everything else left alone, a test page went from every sampled pixel being white to every sampled pixel being 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)

Worth knowing: the elements themselves did not change. The heading, the paragraph and the container kept exactly the colours they had. All of the visible change comes from the blend layer painted over the top, which is why photos and logos usually need excluding.

![Screenshot: Worth knowing: the elements themselves did not change. The heading, the paragraph and the container kept exactly the colours the](https://theplusaddons.com/wp-content/uploads/2024/02/dark-mode-demo.gif)

## Styling the switch

The **Style** tab has two sections. **Switcher** covers the switch itself and is shown when **Style** is set to **Style 2**. **Switcher Text** covers the wording next to the switch and its typography, colour and offset.

## How it behaves

- Activating dark mode adds **darkmode--activated** to the page's `body` element, which is what everything else keys off.- The visitor's choice is remembered in the browser's local storage, not in a cookie, and it is remembered whether or not **Save in Cookies** is on.- With **Global Color**, the blend layer is made transparent, so nothing is inverted - only the colour values change.

## Limitations

- **Save in Cookies and Auto Match OS Theme cannot be switched off.** Both are sent to the page as enabled no matter how the toggles are set, so turning them off in the panel changes nothing.- **Mix Blend Mode is hidden on Style 2**, and **Animation Time** is hidden on Style 1. If a setting you were told about is missing, check **Style** first.- **Global Color does nothing if you have not saved any Elementor global colours.** With an empty palette the widget outputs no colour rules at all and the page falls back to being inverted instead.- **Mix Blend inverts photographs too**, which rarely looks good. Exclude them with the exclusion list.

## Troubleshooting

### The switch does not appear

The widget is not enabled. Go to **The Plus Addons > Widgets**, search **Dark Mode** and turn the toggle on.

### Dark mode only works on one page

The widget is on that page only. Put it in a header or footer template so it loads everywhere.

### I cannot find the Mix Blend Mode dropdown

**Style** is set to **Style 2**. Switch it to **Style 1** and the dropdown returns.

### Global Color is selected but the page just goes black

Your Elementor global colours have never been saved. Set them under **Site Settings > Global Colors** first, then fill in the four rows.

### The page remembers dark mode even though Save in Cookies is off

That is the known behaviour described above - the setting has no effect and the choice is always remembered in the browser.

## Not verified

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

- The entire **Style** tab - **Switcher** and **Switcher Text** - only the section names are listed here. None of the controls inside them were exercised.- **Auto Match OS Theme** was never tested against a device set to dark, so nothing here describes what a visitor sees on first load.- Nine of the eleven **Mix Blend Mode** values were never rendered; only Difference and multiply were.- The **Position** sliders were not moved - only their defaults are quoted.- The widget was never placed in a header or footer template during testing; every test put it on a page.

https://www.youtube.com/watch?v=gvA8Y2D4DSk

## Related Docs

- [How to Add Mix Blend Dark Mode in Elementor?](https://theplusaddons.com/docs/mix-blend-dark-mode-in-elementor/)- [How to Set the Global Colors in Dark Mode?](https://theplusaddons.com/docs/set-the-global-colors-in-dark-mode/)- [How to Exclude Elements from Dark Mode in Elementor?](https://theplusaddons.com/docs/exclude-elements-from-dark-mode-in-elementor/)

## Frequently Asked Questions

**Q: Why does the dark mode switch only show up on one page sometimes?**
A: That usually means the widget was placed on that one page only. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH loads the switch wherever the widget is inserted, so a page-level placement stays page-level. For site-wide dark mode, the widget needs to live in a header or footer template so it loads everywhere.

**Q: What should I use: Mix Blend or Global Color for dark mode?**
A: Mix Blend is the faster setup because it paints a full-screen layer and inverts the page at once, but it also affects photos and logos, so exclusions matter. Global Color is slower to set up but gives more control because it swaps Elementor global colours instead of inverting everything. The right choice depends on whether you want speed or precision.

**Q: Why does the Mix Blend Mode dropdown disappear?**
A: That dropdown is tied to Style 1. If Style 2 is selected, Mix Blend Mode is hidden by design, and Animation Time takes its place instead. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses Style first as the gatekeeper for which controls appear, so missing options usually mean the style choice changed.

**Q: Why does Global Color turn the page black instead of applying dark colors?**
A: That happens when Elementor global colours have never been saved. Global Color only works after you set your palette under Site Settings > Global Colors, because the widget maps its four rows to those saved colours by order. If the palette is empty, no colour rules are output and the page falls back to being inverted.

**Q: Does dark mode remember my choice even if Save in Cookies is off?**
A: The visitor’s choice is still remembered in browser local storage, not in a cookie. That means turning off Save in Cookies does not stop the preference from sticking between visits. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH also notes that Auto Match OS Theme behaves as enabled regardless of its toggle state.

**Q: How do I keep photos and logos from looking bad in Mix Blend dark mode?**
A: Exclude them. Mix Blend inverts photographs too, which rarely looks good because it blends over whatever is underneath instead of changing only selected colours. The widget includes an exclusion list with CSS selectors and also a built-in default ignore class for image and listing elements. That matters most on pages with branding or photography-heavy layouts.