From the course: JavaScript Code Challenges: Creating Web Apps

Unlock this course with a free trial

Join today to access over 25,300 courses taught by industry experts.

Dark and light mode

Dark and light mode - JavaScript Tutorial

From the course: JavaScript Code Challenges: Creating Web Apps

Start my 1-month free trial Buy for my team

Dark and light mode

“

- [Instructor] Right now our app is functioning pretty nicely already, but let's make it even cooler by adding a dark and light mode to it. At this point, we only have a light mode, so let's go ahead and add a checkbox for setting it to dark modes. What I want to happen is that when we check the box, it switches to dark modes, and in order to do that, I actually need to have the CSS for my dark mode in place as well. There we go. I'm having dark mode classes on my body for a few of the elements, but then I need to make sure that the dark mode class gets added. And in order to do that, I need to adjust my script a little bit. All I need is to add an event listener to my theme toggle. So let's go ahead and do it like this. So when we change it, I'm going to toggle the dark mode class and I'm going to set it to whether the theme toggle is checked or not. Alright, let's see this in action. So here's our light mode version, and as you can see, when I tick the box, it turns into dark mode…

Contents