Light/Dark Theme Toggle with CSS and JavaScript

In this tutorial, we are creating a Dark/Light Theme Toggle effect using vanilla #CSS and #JavaScript. This is a perfect component to be used on a website that has a Dark theme mode.

#css #javascript
---
Support my channel:
Thank you! 🙏

---

---
Follow me on:

[chiemelieakah]

I have been searching for a simple explanation on how to do this. thanks a lot

[ChumX]

By hiding the actual input you lose the ability to navigate the switch using the keyboard (tab + space). A solution to this would be to place the input inside the label (absolute), make it transparent and make it the same shape as the label. That way it works both with mouse as well as keyboard events. Also it would be good to set some hover/focus styles for accessibility.

[visivoo]

Thanks for including source code! More people should do so in their descriptions.

I'm very grateful. <33

[marisa]

Thank you, Florin! I really appreciated this tutorial! ☺

[sakshihalge]

You have explained every line of code and I can make a theme switcher anytime I want without watching any tutorial. Thanks a lot.

[edwinfragiel]

This is by far the most cool and simplified video about Dark Mode on web design I've ever seen. Thanks!

[Techprinxess-mel]

Nice video! I have always wanted to learn to make a dark mode toggler. Thanks for making this a short and concise tutorial!

[el]

Thank you so much Florin, you're my favourite YouTuber!

[maximepoitoux]

Your tutorials are really excellent, you deserve many more subscribers !

[andreimuntean]

Thanks very much! This is exactly what i needed! Keep up the good work!🔥

[shivangb]

Loved this tutorial! It was an absolutely amazing beginner-friendly explanation! Thanks a lot, @Florin Pop! ❤

[akashbhandwalkar]

You are just amazing Florin Pop. Nice Tutorial.

[saffron]

You should make a video tutorial on each one of your 100 projects in 100 days

[blessdarah]

Your dimensions are always good! I like the way you use them

[AJAYSINGH-johg]

very well explained cleared all concepts. THANKS..!!

[anvoids]

Great video, I love the button but for some reason my checkbox is not working... does this work in Blogger?

[JamesHyunwooLee]

What's that font thing you had to download at 2:53?

[edozieonyeanusi]

Thank you very much, Florin. This was very helpful.

[iconick]

Excellent vid, clear and concise. Thank you!

[chetan]

Hi @Florin pop!
I'm using the vscode. I donno how to add that extension or import that font awesome thing in that vscode. Could u please help me?