Add a Dark Mode Toggle/Switch in WordPress Website using Elementor (WITHOUT PLUGIN)
Вставка
- Опубліковано 26 сер 2024
- Today I'll show you how to add a Dark Mode Toggle/Switch in WordPress Website using Elementor without Plugin.
✅Get Elementor Pro:
makedreamwebsi...
✅Get Domain & Webhosting(SAVE 50%):
makedreamwebsi...
✅Get code snippet for Elementor Dark Mode Switch:
makedreamwebsi...
✅Get creative templates on my Template Shop:
templatish.com
In this Elementor tips and tricks tutorial, I’ll show you how you can create a dark mode switch/switcher on your WordPress website using Elementor. You may find a bunch of dark mode plugin (or night mode plugin) for WordPress but unfortunately none of them are working very well.
So, today I’ll show you how you can create a 100% working WordPress dark mode switcher where you can design a fully customizable toggle button, you can specifically edit each and every text color or the background color for the dark mode or even you can use 2 different images for 2 different modes (dark/light mode).
I’ll also show you how you can save that dark/light mode website on your browser cookie. So, when anyone revisit, they can see your site in their previously selected mode.
First, we create the toggle button by combining the divider and icon widgets. But, we need some JavaScript code to activate that dark mode toggle. Here you can customize everything like the page background color, text color or any other color of every elements. We have done this by inspecting the source code and edit the CSS code.
Lastly, we have also created a dark mode version of the header where we use 2 different logos and also create a dark version menu. I'll also show you how you can save the dark mode on the browser cookie so if we close and reopen our browser later, it preserve your previously chosen mode.
So, that’s how you can create a 100% customized WordPress dark mode without plugin. Although it’s pretty repetitive and time consuming to change all the content color one by one. But, if you want to design your dark mode on your own way, it’s the best solution for that.
If you enjoy, don't forget to like and subscribe.
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?
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?
That need more custom code. If you need any additional features you can email me for that
@@MakeDreamWebsite thank you!
Does this work for every page of the site?
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
Hi Great tutorial ! Is there a possibility to simply change a global color with CSS in dark mode ?
Exactly
great video ! Thank you so much !!
You're welcome!
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?
Amazing. But for the hero section how can i use this background?
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?
Hello, could I add the JS code to functions.php and the styles to the child theme to have dark mode work site-wide?
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
It would be helpful to say where you got the dark class. because it's not working
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.
Do you know that?
Your video's are so helpfull for us.
Thanks! Glad to know that...
Very good video!
Thank you!
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!
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. :)
Yes it's possible, you need to add more CSS for the dark hover state
Great Tutorial. Will this work on Divi Theme?
will you please create one tutorial for Divi Theme?
Thank you.
No, this method is for Elementor Only. Not sure if it also works for Divi... most probably not.
Wow🔥🔥👍
🙏🙏
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.
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.
Hi, this is really awesome tutorial. However what if i wanted it to be global? is that possible thanks!!! MOre to you good sir!!
Then you can use browser cookie and get the data from cookie when page loaded.
@@MakeDreamWebsite i mean i want to make it available through out the website not just for 1 page, how do i do that?
Same question here! @@Euhangaming
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.
@@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
hi i am busy for the past day watching your videos is this still working with flex container?
As those are made for section/column, I'vent test it for containers
hey can u do tutorial how to import codepen to elementor??
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.
@@MakeDreamWebsite please make the tutorial sir, i need the stripe gradient animation because its so cool
Hello bro, but the performance of the site, is slower with plugin or doing this????
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.
Hello, does the dark mode apply on all pages when toggled? Thanks!
Yes, but, you also need to apply these for your other pages too
@@MakeDreamWebsite thank you! Your tutorials are amazing!
When will elementor have this built in?
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.
@@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.
starts @ 8:10
hi if you have any wodpress projects i can help
Do you have good knowledge of HTML, CSS, JS, WordPress Theme Development and Elementor. If so, you can email me some of your portfolios.
The website with code snippets no longer works
Which version of Elementor do you use? Are you using the new flexbox container?
@@MakeDreamWebsite I meant your website with code snippets was down last night, looks to be back up now.
@@ethanwanoreck378 Thanks for letting me know...
@@MakeDreamWebsite I use containers and the code doesn't seem to be working unfortunately...
give us all code
Code link is in the description
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!
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