Light & Dark Mode toggle using Tailwind CSS & Alpine JS

This video shows you how to implement the toggle button to switch between light and dark mode for your website using Tailwind CSS & Alpine JS. The demo also includes "remembering" the users choice for the session.
GitHub Link: github.com/Thi...
--------
The video is sponsored by Showwcase. Join me there - www.showwcase....
--------
Subscribe and stay tuned for tips, tutorials and more.
Follow me on Twitter: / shrutibalasa
Follow Thirus on Twitter: / thirusofficial
Visit my website: www.shrutibala...

[@mauriciovalencia7300]

Such clear thinking and tutorials, thank you Shruti!

[@Thirus]

Thanks for the comment Mauricio 😊🙌

[@kieran2347]

Yet another great video! Thanks, Shruti!

[@Thirus]

Welcome :)

[@abusaadwachu2850]

Shurti has done it again...good work

[@Thirus]

Thank you!

[@MilindGoel15]

Would we need to add this every page on our project? Like suppose we have 2 pages, we need all these in both those pages. And I think the dark mode value will continue to follow on next page too.

[@Thirus]

Yes, it needs to be on each page. And yes, the preference is saved.

[@ris5281]

Hi. i've got a problem. in localstorage the darkMode set to true, but whenever i reload the page the page gone light for some milisecond then get dark

[@Thirus]

Oh! Try this solution - stackoverflow.com/a/59628913 Haven’t tried it myself, but it might help.

[@StefanSchmalhaus]

@@Thirus This Stackoverflow solution is a completely different approach and cannot be applied to your script. Maybe you can do a follow-up video on how to improve your solution.

[@sornt]

Great!!

[@govindsaini8085]

Hi mam I m facing the pb of display I want to show in lg screen of image and mobile devices I want to show hidden of image "hidden md:block " I used but doesn't work show this kind of pb how to solve mam if possible as soon as reply for this question

[@Thirus]

Have you tried inspecting the element in browser? You will have to share screenshots of your code for me to understand why it’s not working. DM me on Twitter @shrutibalasa

[@hyunseokyang7032]

Thanks for the great tutorial! Awesome. Could you share how to keep darkmode(or light) over different page? becuase when I click other menu, it changed to light mode from dark. :-)

[@Thirus]

Hi, I’ve shown exactly that towards the end of the tutorial using localStorage.

[@stephenlau2845]

Hi, Thanks for your sharing, How can I change my logo image when I use dark mode toggled ? Thanks again...!

[@PriyanshuCK]

Using Tailwind css: .\!logo-light { content: url("logo-light.png") !important; .dark .dark\:\!logo-dark { content: url("logo-dark.png") !important; }

[@stephenlau2845]

@@PriyanshuCK Thank very much....!

[@medcharrafi]

u change my mind about women instructor

[@Thirus]

Interesting!

[@mariooviedo4298]

Hi, I hope you can help me, when I try to add to the switch button (or another type of button xd) it doesn't run and the console in the browser shows me this message "ReferenceError: isDark is not defined" :c I follow all of your instructions

[@Thirus]

I will need to look at your code to help. DM me on Twitter twitter.com/shrutibalasa

[@mariooviedo4298]

@@Thirus Thanks! I fixed it yesterday, I was trying to use an old version of AlpineJS haha thanks anyway, good video!

[@Thirus]

Great to know it’s solved :)