Automatic Light Mode ⚡ Dark Mode Switcher for GeneratePress (the super-simple way!)
Vložit
- čas přidán 2. 07. 2023
- In this video, I'm going to show you how you can use the "prefers color scheme" CSS media feature to create an automatic light mode / dark mode switch on your GeneratePress website.
Here's the code you need:
@media (prefers-color-scheme: dark) {
/* put your root color declarations here */
}
[ Video Created and Produced by Kyle Van Deusen ]
👏 COMMUNITY
Join our free community: theadminbar.com/group/
(voted best WordPress community!):
🔴 EVENTS
See past and upcoming live interviews & workshops: theadminbar.com/events/
🎁 PRODUCTS
Sell more care plans with The Website Owner's Manual: theadminbar.com/products/wom/
Write proposals in less than 15 minutes with this template: theadminbar.com/products/easy...
Fill your prospect pipeline in this 3-week challenge: theadminbar.com/products/pros...
5 Airtable templates I use to run my agency: theadminbar.com/products/agen...
📨 NEWSLETTER
Stay up-to-date with the best from in and around The Admin Bar: theadminbar.com/friday-chaser/
🤖 MISC
Visit our website: theadminbar.com
Product endorsements: theadminbar.com/products/#end...
Kyle on Twitter: / kylevandeusen
Neat and simple solution. A switcher would be a great addition
love it! Great solution. And as you asked to do, I would definitely love to see another vid about a "switcher" in the future.
Thanks for the great video Kyle! Yeah would great to see a switch solution!
Thanks Kyle - really helpful. Would really like the follow-up with the switcher solution. There are plugins out there for this, but it has to be fairly straightforward. Would appreciate seeing your approach to JS in GP. I have a hunch it can be accomplished with elements - and if so, that opens a world of possibilities. Actually, you may wish to consider a JS video in GP, and using the dark mode switcher as a good example.
Thanks! I did get the switcher working, but I need to get someone to help me make sure the JS is optimized. It's on my list!
😊 Thanks Kyle.
Hello Sir,
Nice video, please continue making these types of videos.
Well done and bah humbug to 4th July hurting this as it’s now time to go play!
been waiting for this one, very excited for the toggle switcher code
Ohhh I've been working on this and it's REALLY freaking slick!
This is awesome! We definitely would like to see switcher solution. Thanks Kyle!
Sweeet! I'm going to try and make something simpler (yet more capable) than what I have done in the past.
@@TheAdminBar cant wait to use it on my blog! Huuuge thanks Kyle!
@@TheAdminBar can we have a hope to see this dark mode toggle in the near future Kyle? I'm checking on your channel everyday :)
Yes!
I thought you might like this one! :) This really is a SIMPLE way to do it.
@theadminbar I'm just trying my chance again :) is it possible to see toggle switch option for this Kyle?
I came up with the whole solution, but at some point I nuked the install 😭 Just haven't had the motivation to do all that work again 😭
@TheAdminBar your channel is the only channel that I follow for WordPress and GP&GB stuff. How about this for motivation? :) thanks for all the works you've done
Cool cool cool.. thanks. So yeah, let's see the GP way to handle the JS Switcher.
To the code! 🙌
Can we put an additional element or a toggler? to switch
Yeah, it can be done. I got it working shortly after this video but there didn't seem to be much interest.
yes would like to see toggle for this, however i guess that means the toggle then overrides the system mode ?!
This is literally the only thing I can think of I’ve felt GP is missing. Should be common theme practice by now right?
It does seem quite popular! But this makes it pretty darn simple. I may just start setting up my sites with this in mind from the beginning.
@@TheAdminBar thanks I’m goi g to give it a shot.
awesome. [lease make video on toggle switch using JS. waiting for next video.