CSS Hack: Toggle Dark Mode with :has()

The CSS :has() selector can be used to toggle dark mode, light mode, and themes with zero Javascript, just HTML and CSS. :has() finally arrived in all major browsers, having dropped in Firefox December 2023.
👯‍♀️ Clone it:
try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@templa946]

mmm...this is good on a single page site that doesn't get refreshed

[@webbae]

yea - I wish I had mentioned that! see pinned!

[@jonasarleth]

I think my go to solution from now on

[@webbae]

Thanks Jonas - check pinned comment for thought on storing preference between refresh and page load! Maybe I'll throw together a tutorial on that when I get a chance.

[@mateusvidal3187]

The best tutorials are here! haha Clear and straight to the point! Thanks dude!

[@webbae]

Thank you Mateus!

[@tolulopeabolarin2183]

Thank you so much

[@xamznerol]

Thanks so much this comes exactly in the right time! 🎉❤

[@webbae]

Glad it helps! Be sure to check the pinned comment for a few thoughts on how to use this across page navigation/reload.

[@kudz]

Another banger🔥🔥

[@dalejanzen3253]

I am not saying I am a code warrior by any means... but your championing of code as an enabling superpower (the how and also importantly the why) is beginning to dampen my resistance! 🤔🙃

[@webbae]

Thanks Dale - you're awesome!

[@jclewis33]

This is great. Easy way to switch to dark mode. Thanks for sharing.

[@heatherliu6856]

sickkkkkk thumb bruv

[@webbae]

say less.

[@supercharge.studio8053]

awesome, as per usual. Did your heating break down? :)

[@webbae]

hahahahah the GF and I have been experimenting with lowering our heating bill. Glad you noticed 🤣

[@shahriarkhaneasan3268]

This is amazing🙂

[@webbae]

💯

[@digitalshane_]

"If you liked this video.." What if I LOVED it?!

[@webbae]

YOU STUCK AROUND TILL THE END 👑

[@brainybitesOfficial035]

It's Amazing soldier

[@webbae]

🫡

[@elektrotwerk]

👌

[@webbae]

🫡

[@joseaguilar5372]

tired it didnt work can you give the code please

[@webbae]

You can grab from the cloneable. Are you having issues with it?