Toggle between Light and Dark Mode using Tailwind CSS & Vanilla JS

[@danielrodas7692]

My go-to person for all Tailwind CSS related. Thank you! 🙏🏽

[@Thirus]

Aww! Thanks ☺️

[@Vladimir-yh2dl]

Great video tutorial on how to implement toggle between Light and Dark mode using Tailwind CSS & Vanilla JS! Thanks for sharing such a useful and informative tutorial. I found it very easy to follow along and was able to successfully implement the toggle functionality on my website. Your step-by-step instructions and clear explanations really helped me understand the process. Thank you again for creating this helpful resource!

[@Thirus]

Thank you Vladimir :) So happy to know this!

[@austineukpo5153]

thank you, that was indeed a very helpful tip 🙏

[@Thirus]

You’re welcome!

[@Nand00Coelho]

Your video really helped me on the company's project. Thank you!

[@Thirus]

So glad! You’re welcome 😊

[@thisisthelogic]

Wonderful, thank you!

[@Thirus]

You’re welcome!

[@samuelnmeje]

Thank you so much. I am happy and feel at home that you use tailwind. I have so much to learn

[@Thirus]

You’re welcome! Many more Tailwind videos coming up. Let me know if you have and particular topics you’d want to see

[@samuelnmeje]

@@Thirus hahahah a list of things i don't understand might be a lengthy blog post. I just love your style of explaining things. and i found ur video helpful at this particular time.

[@Thirus]

Very happy to know. Stay tuned!

[@MarkMutai]

really awesome and straightforward. Thank you!

[@Thirus]

You’re welcome 😊

[@dev_jeongdaeri]

you deserve more subs!!!!!! super amazing tutorials!!

[@Thirus]

Thanks a lot 😊

[@aj4819]

Thank you! This helped me a lot and thanks to you it was very easy to follow.

[@Thirus]

Glad to hear that 😊

[@AimerYui]

another useful video, thanks 😁

[@Thirus]

You’re welcome 😊 Stay tuned for more

[@adepurnama1642]

This channel is so underrated, simply amazing content, thank you!

[@Thirus]

Thank you so much 😊

[@emmanuellemikan696]

Thank you very much for this

[@Thirus]

You’re welcome :)

[@supriyosarkar1806]

I just started learning and using tailwind css in my projects yesterday and uploaded this video at the right time . Thank you ma'am . Happy New year ma'am.

[@Thirus]

That’s amazing to know! You’re welcome 😊 And wish you too a very happy new year 🎉

[@aswin123adam]

Great Video . Never really tried tailwindcss before but it seems pretty simple , will try to go through the docs and give it a try . Looking forward for the next videos .

[@Thirus]

Great! Do check out the introduction video and all other Tailwind CSS videos in the same playlist and you’ll get familiar in no time 😊

[@stephenlau2845]

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

[@Thirus]

Add both images one after the other. Use the classes “block dark:hidden” on the logo image for light mode. Use “hidden dark:block” for the logo for dark mode.

[@johnifemezuo2641]

thanks your video was helpful

[@Thirus]

You’re welcome!

[@hafeezpp]

Amazing

[@Thirus]

Glad you liked it!

[@abhinaygunjal9374]

Can you please make a video on how to retain the dark mode after refreshing the page? I am not able to understand the article.

[@Thirus]

You need to use localStorage for that. I have implemented it in this video - kzbin.info/www/bejne/hKfSiqVtmrZljtE It uses AlpineJS but the concept is same

[@abhinaygunjal9374]

@@Thirus ma'am, in the function mentioned here, I added two lines First to the true part Localstorage.add('dark') Then to the else part Localstorage.removeItem('theme') It works on the console showing dark mode is retained but on screen it switches back to light mode I even added the official tailwind code for the flickering part in the head tag as well. Please help this is for the final stages of the project.

[@Thirus]

Can’t understand much from this. DM on Twitter and share your code

[@abhinaygunjal9374]

@@Thirus did ma'am. I have shared the snippet on twitter

[@belkocik]

What if there is no tag in next.js project? :D Just apply to pages/index.js tag?

[@Thirus]

Yes, you could do that too

[@garbjorn1757]

_app.js add className="dark"

[@puneetsingh9678]

If I set darkMode: "class" then would that recognise if the os is set to dark and automatically switch as well?. If not then, if I have to use functionality of both "class" and "media", what are my options?

[@Thirus]

That's a really good question. So, I found out that using the `prefers-color-scheme` media feature, you can detect if the user has the dark mode turned on. (That's what Tailwind also uses under the hood). So, keeping everything as it is, in Javascript, use this line to detect if user has turned on dark mode: if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { } Within the block, add the ‘dark’ class to body. Hope this helps :)

[@puneetsingh9678]

@@Thirus Thanks 👍

[@syahidann7675]

thank you!! you help me a lot❤️

[@Thirus]

You’re welcome 😊

[@kieran2347]

Yet another amazing video, Shruti. I see why you love TailwindCSS lol. It takes time to know and remember the class names but its worth the time and practice. Wishing you happy and a prosperous new year in advance. 💗

[@Thirus]

You’re right, it’s totally worth. And you actually don’t have to remember. Intuitively you can type and the intellisense plugin shows suggestions. Wishing you a very happy new year too!

[@ashutoshbw]

Thank you very much ma'am. It was very helpful :)

[@Thirus]

You’re welcome 😊

[@rakaa31]

but whenever i click to another page it becomes light

[@Thirus]

Yes, you can use localStorage to save the users choice and switch to that on page load.

[@PauloGuerraF]

Hi, awesome video! Thank you very much for the detailed explanation. I have a question, is there any chance to animate the transition between light and dark mode? Would like to add some easing and timing when switching modes.

[@Thirus]

I’m not sure if there’s a straight forward way to do that

[@PauloGuerraF]

Thank you@@Thirus ! I found github.com/jjranalli/nightwind very helpful to implement timed transitions between dark and light mode

[@Anthony-ec8mz]

thank you :)

[@Thirus]

You’re welcome

[@somerandomchannel382]

I love the idea but dark mode part could be a single video maybe 2min long? maybe included source code on github?

[@kingofrock37]

thank you

[@Thirus]

You’re welcome 😊

[@miformadepensar]

How do a lot lines in js vue or reactive: Component javascript methods:{ darkmode: function(){ document.querySelector('html').classList.toggle('dark') } } only javascrip mode. document.getElementById('darkmode').addEventListener('click', function(){ document.querySelector('html').classList.toggle('dark') }) thanks for you workshop is very cool.!

[@abhipshasahu2868]

Awesome! Thank you so much! Could you attach the source code for this in the description?

[@kieran5746]

This is another great tutorial, thank you. Unfortunately, there is an issue with JavaScript and the point of having a dark mode toggle. The JavaScript should account for saving the preference and automatically checking the box when a visitor switches between pages or refreshes. As it stands the state is forgotten and requires a user to toggle the dark mode again for each page load. Would it be possible for you to reply and let me know what that JavaScript would look like? Thanks again.

[@Thirus]

Yes, this tutorial is very basic. It's a starting point for dark mode implementation. You can check this blog post for that functionality - blog.prototypr.io/create-your-own-dark-mode-using-js-css-variables-and-localstorage-8b461864644b

[@catmonster7671]

I do as the video tutorial, but the switcher did not move when I click it. I don't know how to solve the problem.LOL

[@Thirus]

Oh! DM me on Twitter if you need help - twitter.com/shrutibalasa

[@shreyaagarwal9498]

Please provide source code. :)

[@Thirus]

Will upload on GitHub and provide the link. Kindly check back tomorrow 😊

[@mushypeeze3545]

Try slowing down, and providing the whole code, some of these parts were very difficult to keep up with you as you went far too fast and skipped over important parts.