This is the only real solution in the internet for elementor and wordpress, you are a monster, thank you!!! Btw, there is a way to the site detect the color user default (dark or light) and provide access already in dark or light mode?
This is a great technique. Would be cool to inherit the browser setting if dark mode is already on. If you can script it to maintain toggle across pages, refresh, and inherit from the browser, you literally created the only dark mode option any site would need. I really like the approach, because it does not apply any nonsense filters that whack images, videos, and other page assets. it allows you to target specific pages, sections, and classes. I'd like to see you improve it to retain the toggle selection on refresh or other page where the scripts target. It's not really very usable in this state, because it just triggers contact form submissions complaining about having to keep selecting dark mode. Also, when the page is refreshed and dark mode is toggled on, the toggle remains on dark mode but theme switches back to normal mode. People bombed the contact form and email to report it. I have never found a one size fits all Dark Mode, but this technique may be the one. Very good, bruh!
@@UrielSoto Cookies will get the job done. You should improve it. You really have something here. It really solves the one size fits all dark mode. The apps all suck when you need things they can't do, or require hassle workarounds. Your approach really solves this problem. First we think, then we do, then we do better.
@@UrielSoto I can't figure out why this isn't working. The original code works. The updated code with localStorage doesn't. Any ideas? What am I missing.
This is amazing, really! Thank you so much. I will never understand why Elementor does not offer such an functionallity built in. I made on my website a tutorial how I have done it and refered to you and your video. I putted the toggle checkbox in my header and the js code into wpCode Lite. It works for 95%. There is one (horrible) bug - Flickering. When the browser saved "dark" and I switch to another page, the page first loads in light mode and one second later it switches to dark mode. I already made a lot of research, but fixing this seems quite hard :(
Hey hey :) Great tutorial! I only have one problem, it doesn't work on my website. I can't click on the sun and the console says it can't find the targets. Has something been updated? I'm working with GSAP for the first time.
This is the only real solution in the internet for elementor and wordpress, you are a monster, thank you!!! Btw, there is a way to the site detect the color user default (dark or light) and provide access already in dark or light mode?
Very well done and many thanks. Also very useful for accessibility. Many people with impaired vision find dark mode much easier to read.
Thanks Uriel! Great video to start 2023.
This is a great technique. Would be cool to inherit the browser setting if dark mode is already on. If you can script it to maintain toggle across pages, refresh, and inherit from the browser, you literally created the only dark mode option any site would need. I really like the approach, because it does not apply any nonsense filters that whack images, videos, and other page assets. it allows you to target specific pages, sections, and classes. I'd like to see you improve it to retain the toggle selection on refresh or other page where the scripts target. It's not really very usable in this state, because it just triggers contact form submissions complaining about having to keep selecting dark mode. Also, when the page is refreshed and dark mode is toggled on, the toggle remains on dark mode but theme switches back to normal mode. People bombed the contact form and email to report it.
I have never found a one size fits all Dark Mode, but this technique may be the one. Very good, bruh!
Yeah I was thinking of just saving the state in the clients local storage. Basically with cookies. I can do it.
@@UrielSoto Cookies will get the job done. You should improve it. You really have something here. It really solves the one size fits all dark mode. The apps all suck when you need things they can't do, or require hassle workarounds. Your approach really solves this problem.
First we think, then we do, then we do better.
@@dl9151 love that saying! I've updated the code to include local storage. Let me know what you think 🤔
@@UrielSoto You rock! I will have some time tomorrow to check it out.
@@UrielSoto I can't figure out why this isn't working. The original code works. The updated code with localStorage doesn't. Any ideas? What am I missing.
youI am one of your followers. We miss you. You are a professional
awesome tutorial! Do you also have any video to change header color when it reaches a specific section?
This is amazing, really! Thank you so much. I will never understand why Elementor does not offer such an functionallity built in.
I made on my website a tutorial how I have done it and refered to you and your video. I putted the toggle checkbox in my header and the js code into wpCode Lite. It works for 95%.
There is one (horrible) bug - Flickering. When the browser saved "dark" and I switch to another page, the page first loads in light mode and one second later it switches to dark mode. I already made a lot of research, but fixing this seems quite hard :(
Hey hey :)
Great tutorial!
I only have one problem, it doesn't work on my website.
I can't click on the sun and the console says it can't find the targets.
Has something been updated?
I'm working with GSAP for the first time.
Very nice video. I also like to see a offset card slider with code. Maybe you wanna do it in your next video👍🏼
Hi .. nice video .. how can I save the state of toggle for other pages?
Thanks Uriel! 😍
We need at least 1 video a week :)
I wish I could i have a long list of videos I want to make but I've just been so busy 😔
problem with this is if you are in dark mode as default and you switch to light mode and go to another page it goes back to default.
Hi, Can I put a specific color to a container?
How can I make a woocommerce dropdown variation + quantity button in the same line instead of both in different lines in single product page
Can I used the code in code snippet or suggest any plugin for gsap
Anyone know if this works anymore? I tried it and could not get it working?
Work on entre site?
Example 1 is not working.
example 1 not working
good luck