FREE Global Dark Mode Toggle Switch Plugin for Elementor

In this Elementor tutorial, we will see how to enable Dark Mode Toggle Button Swicth in 2 modes of Light and Dark Theme. This plugin brings 2 unique modes, i.e. Blend Mode and Global Colour Mode. You can add dark mode toggle switch on any Elementor WordPress site and theme for completely FREE.

🔥 USE CODE " YOUTUBE10 " TO ENJOY EXTRA 10% DISCOUNT

⏯️ Don't Forget to Subscribe to our YouTube channel for ✨ the latest updates -

Works on any WordPress Theme, no coding knowledge required. Easiest way to add Day Night Theme on Elementor website. You also Ignore Dark Mode for Images or any Section using CSS Classes.

Exclusive Features of Elementor Dark Mode Plugin
✅ 2 Different Modes
✅ Elementor Global Colours Dark Mode
✅ Blend Dark Mode
✅ Custom upload Dark Mode Switcher Icon
✅ Custom Positioning of Dark Mode Switcher, i.e. Add anywhere in your website
✅ Auto-Match OS Theme, Browser Theme
✅ Save Toggle Switch selection of Dark/ Light Mode
✅ Ignore Images, Section using Custom CSS classes

Dark Mode, also known as Night Theme, is a very popular choice these days, from site like Facebook to Google, every website is adding Dark Mode.

---
Time stamps 🕐

0:00 Intro
1:45 Activating the FREE Dark Mode Elementor Widget
2:39 Method 1: Using Global Colors for Dark Mode
8:42 Method 2: Using Mix Blend Mode for Dark Theme
9:20 Ignore Dark Mode for Images, Sections etc
12:01 End Notes

---

🔥 USE CODE " YOUTUBE10 " TO ENJOY EXTRA 10% DISCOUNT
---
Important Links 🔗

If you have any questions, feel free to say Hi👋 on our messenger

#ElementorDarkMode #Day/NightTheme #ElementorTutorial

[imthatguydavid]

using the global color options, does this only work with the 4 global color types (primary, secondary, text, accent). What if we have some custom colors in our global colors? how do we associated a darkmode color to those global custom colors?

[phpvbacoder]

This just inverts all colors. Also all Images So i cant use this. Ignore does not work.

[secondsky]

the only issue about this thing is: there is not a single option NOT to have this floating design... i would prefer to just use the switch at any point i specify! Right now its way to prominent with the floating only...

[ntrnweb]

Thanks for the tut. However, the plugin is not working as desired. The feature to ignore elements based on class does not work. Can you give a little more detail on how you have gotten this to work? Also, you were not detailed enough on the actual dark mode colors. How do you make them replace the default colors? Thanks.

[aydesignart]

Hey there, I'm having an issue where Global Colors does not seem to be working. No matter what colors I choose, it is always set to Mix Blend mode. I put the widget on my header. What could be going on?

[dl]

The custom classes do not work correctly with elementor pages. After I set classes for targeted page assets and use a comma after them, they break. .ignore-dark is what I set. It works fine. When I put .ignore-dark, << with a comma, it fails. So if I want to try and target multiple classes, like native theme classes, and the classes I set for local page assets, it breaks. I have to put the .ignore-dark at the end. It is okay with classes and commas before it, but not after.

Hopefully this makes sense.

[dottybucannon]

Hi, I love this tutorials also, you are all a great team, Thx for this...
But i have 3 questions:

1: I see a hoover background on the switcher how do i turn that off or do i need some CSS code for that?
2: How do I stick this switcher on the top left?
3: We can download a json file voor a switcher(button) How do we upload it in to the dark mode ?

Love from Dotty

[allwebservice]

Global color doesn't work. Any compatibility issue?

[marker]

Help! i dont see the button in the editor!

[posimyth]

⭐ Quick Tip: To Add Dark Mode Switcher on whole site, add this dark mode widget either on site Header or Site Footer Template in Elementor

- Do you love Dark Mode or Light Mode ❓