Add a Dark Mode Toggle/Switch in WordPress Website using Elementor (WITHOUT PLUGIN)

[@JohnXionidis]

Great tutorial thank you very much! I would like to ask if can we directly target the h1, h2, p, img, btn etc directly without the need to copy those long elementor classes?

[@lunamcnally2062]

Super helpful! What would I add to the script if I would like to auto-detect the user's system preference rather than requiring them to use the toggle?

[@MakeDreamWebsite]

That need more custom code. If you need any additional features you can email me for that

[@lunamcnally2062]

@@MakeDreamWebsite thank you!

[@servicemanager1816]

Does this work for every page of the site?

[@ammarsayal]

I made full notes and also applied them on my website, this tutorial is excellent i only thing that I want you to explain that social icons are not changing their color in the dark mode in elementor so plz help me to solve it. You can make a short video on shorts or insta. Just a suggestion Thank you

[@ulyssefontaine1095]

Hi Great tutorial ! Is there a possibility to simply change a global color with CSS in dark mode ?

[@jabeztadesse]

Exactly

[@onedigitsolution1979]

Light and dark theme feature is not working on another pages like my single blog post page is not picking light and dark theme color feature. Champ could you solve my problem?

[@yhmunna9444]

Amazing. But for the hero section how can i use this background?

[@thegoriberchannel757]

It would be helpful to say where you got the dark class. because it's not working

[@rossrivalbendillo5582]

This one is cool , nut when I performed a transition with putting the toggler inside a popup or off-canvas menu it doesn't work. Can we rework and update on the script to make this function?

[@fidelisagency6015]

great video ! Thank you so much !!

[@MakeDreamWebsite]

You're welcome!

[@WebEditor-w2t]

Do you know that? Your video's are so helpfull for us.

[@MakeDreamWebsite]

Thanks! Glad to know that...

[@Webvision-e4r]

hi i am busy for the past day watching your videos is this still working with flex container?

[@MakeDreamWebsite]

As those are made for section/column, I'vent test it for containers

[@MikeKellner]

Hello, could I add the JS code to functions.php and the styles to the child theme to have dark mode work site-wide?

[@MakeDreamWebsite]

You can place them on anywhere, but you have to write the css code for each elements separately. This is one of the drawback of this process

[@devduttbhatt8461]

Great Tutorial. Will this work on Divi Theme? will you please create one tutorial for Divi Theme? Thank you.

[@MakeDreamWebsite]

No, this method is for Elementor Only. Not sure if it also works for Divi... most probably not.

[@Euhangaming]

Hi, this is really awesome tutorial. However what if i wanted it to be global? is that possible thanks!!! MOre to you good sir!!

[@MakeDreamWebsite]

Then you can use browser cookie and get the data from cookie when page loaded.

[@Euhangaming]

@@MakeDreamWebsite i mean i want to make it available through out the website not just for 1 page, how do i do that?

[@wouterverloop8534]

Same question here! @@Euhangaming

[@wouterverloop8534]

For example: I now made the changes on my homepage. Works accordingly, many thanks! But I would like to have visitors get the same settings if they navigate to the About page, or shipping page. How can we enable that? Cookies don't seem to work for this.

[@Euhangaming]

@@MakeDreamWebsite thank you but cookie works on 1 page only, how about when i want it available to other page, like my about page, services page and what not. I tried doing the same thing for the other pages, but it didn't work, it will only work for 1 page, how do i make it global that way its accessible throughout the website. Thanks a lot

[@WTPleo]

Hey brother, can you please tell me if there is a way to get colorized shadow for an image (like the option that Phlox theme has for the "advanced image" widget) but without the Phlox theme, with using CSS? I know it's possible but I just don't have enough CSS knowledge.. Thank you man!

[@xxxtiannn07]

Hello, does the dark mode apply on all pages when toggled? Thanks!

[@MakeDreamWebsite]

Yes, but, you also need to apply these for your other pages too

[@xxxtiannn07]

@@MakeDreamWebsite thank you! Your tutorials are amazing!

[@emeralddeagrella3263]

This works amazing! I do have a question tho, is there a way to get the hover color over a menu in dark mode as well? It's a small accent I wish was included otherwise, loving the new dark mode on my website. :)

[@MakeDreamWebsite]

Yes it's possible, you need to add more CSS for the dark hover state

[@victousrei9909]

Hello bro, but the performance of the site, is slower with plugin or doing this????

[@MakeDreamWebsite]

The performance effect of this is so negligible whether you use a plugin or this method. But, if you compare between two, this method wins. Because plugin may have some unnecessary code.

[@sheikhtheseoguy]

Bro where's the video of the website you have used in this tutorial? I am not getting the video from I button or end screen.

[@MakeDreamWebsite]

Not referring to this exact template. But, that was the tutorial about "How to make create a page with Elementor". BTW, if you want that template, you can email me.

[@adem6370]

Hey. I created a sticky header with your video about the subject and it looks good. But now there is a very annoying scroll problem which disappears when I deactive the header I created with your help. The problem isn't very noticeable in Chrome desktop, it is noticeable in Edge desktop but it kind of disappears after the site loads and I scroll down and back. But in mobile, no matter what the browser is, scrolling is far from being smooth and it results an unusable website for visitors. Thanks.

[@jabeztadesse]

When will elementor have this built in?

[@MakeDreamWebsite]

It's not a difficult thing to do for them. But, they don't do it most probably because if they started to add each and every functionality into Elementor their plugin size would be huge.

[@jabeztadesse]

@@MakeDreamWebsite That makes sense, so they have to prioritize what's important. I think Dark Mode is very important still since it's not a gimmek, it's an accessibility requirement for some site standards.

[@visualmodo]

Very good video!

[@MakeDreamWebsite]

Thank you!

[@denvirrr]

hey can u do tutorial how to import codepen to elementor??

[@MakeDreamWebsite]

There is no specific rule to convert CodePen code in Elementor. For each project the process of converting can be different. But, if you have a good knowledge of HTML, CSS and JS and Elementor DOM, you can sense which portion need to import in your Elementor page.

[@denvirrr]

@@MakeDreamWebsite please make the tutorial sir, i need the stripe gradient animation because its so cool

[@maged.william]

starts @ 8:10

[@mikibeat6248]

hi if you have any wodpress projects i can help

[@MakeDreamWebsite]

Do you have good knowledge of HTML, CSS, JS, WordPress Theme Development and Elementor. If so, you can email me some of your portfolios.

[@hackernet7553]

Wow🔥🔥👍

[@MakeDreamWebsite]

🙏🙏

[@ethanwanoreck378]

The website with code snippets no longer works

[@MakeDreamWebsite]

Which version of Elementor do you use? Are you using the new flexbox container?

[@ethanwanoreck378]

@@MakeDreamWebsite I meant your website with code snippets was down last night, looks to be back up now.

[@MakeDreamWebsite]

@@ethanwanoreck378 Thanks for letting me know...

[@dutchguitarguy7232]

@@MakeDreamWebsite I use containers and the code doesn't seem to be working unfortunately...

[@ebizz8972]

give us all code

[@MakeDreamWebsite]

Code link is in the description

[@MakeDreamWebsite]

Calm down man! Why you're so arrogant. The problem may cause for several reasons like theme code conflict, plugin conflict, elementor version update etc. And in WordPress, technically no one can guarantee 100% to work any functionality in all cases. You can't call it misleading. You see in the comment section it works for many people and the really appreciate. And if for someone it doesn't work they'll also ask for help politely, not in this bad way. You shouldn't expect any favour/help from anyone in the world with this kind of behaviour. Thanks!

[@ammarsayal]

I made full notes and also applied them on my website, this tutorial is excellent i only thing that I want you to explain that social icons are not changing their color in the dark mode in elementor so plz help me to solve it. You can make a short video on shorts or insta. Just a suggestion Thank you