Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

To add dark mode to our website, we first need some elements in our HTML.

All I have is button with the class of theme-toggle and an SVG icon inside it.

Under the button, I also have an h1 that displays dark/light mode and under the h1, I have a paragraph that displays filler text.

In my CSS, I don’t have much, I just have what’s needed for the layout to be in the middle of the page....

[slayingthedragon]

Just to let everyone know, at 13:49 I define an arrow function but I forget to assign it in a variable. Code still works though but, you should probably add the const before handleToggleTheme. I'm a silly goose.

[shreyanshrathore]

Loved the way, how you explained short circuiting....

[Palisis]

Those extra 3 mins at the end are golden

[kudrah]

Best Teacher. Please make more JavaScript Videos as well. You're enhancing my programmer thinking process.

[SaladHood]

I hope you produce more content mate. Your videos are so short and concise and I learn a lot from them. Very easy to understand and follow along.

[rupiik]

You are AMAZING at explaining things! Showing examples, how one element is connected to another and giving most practical information as simply as it need to be.

[molostv]

Young (14y/o) developer and i have to say, your videos are one of the most helpful ways i get new information on coding! much love from Kosovo

[SohaibHasan]

No way! You gotta be kidding me. Was is that simple ❤ Love it. I've been actually looking for something like this and glad I found this tutorial. Not sleeping tonight, excited to put things in action. 🎉

[Zynix-]

You are so good at explaining things, your tutorials are so underrated 🔥
your tutorials deserve attention..

[hamzaashraf]

Your videos are the best on youtube about basic frontend. I need to understand the concept of :before and :after with the content:"" seems like a challenging video.

[methodboss]

Who wants a full course from this guy
The way he teaches it's so understandable

And excuse me for my English because I am not good at my English

[jeremiah]

Literally the best web-dev content in the game, what an amazing channel

[Avarn]

Excellent job. I really loved how you explained short circuiting. It’s such a powerful concept of JavaScript and when leveraged here, it makes a worlds difference.

[jimi]

I had never felt so comfortable learning with Youtube videos until I came across your channel, I hope you can upload more content like this, because you really make very good content, I hope you can make a video about sidenav and how to align it correctly with Main in the center and the articles on the right side. Greetings from Mexico 🇲🇽

[alimansimov]

Truly excellent, when will your JS course come? I saw it on your website.

[Vaannnard]

Amazing videos! I've binge watched through your channel today and I'm happy I found it. It explains css units, flexbox, grids, positioning and very useful general knowledge really well!

[bonezonechannel]

awesome! easy to follow, and allowed me to easily customize more to my wants. will be trying this method with another theme idea other than colors.

[samplechannel]

Yes... really great explanation...❤ We need entire real time project ( js or react) with same level of explanation

[zancrow_gaming]

Bro I had issues understanding the guard operators coz I just started javascript. But I understand almost everything I see here. Well explained💯

[fexrihesenov]

Where are you ? Please come back ) We need more more new tricks, 3d and moreover which contain js projects