Dark Mode Toggle | HTML CSS JS Tutorial

Full Front End UI Tutorial:
   • Complete Website in HTML & CSS | Responsiv...  

In this video I go over how to add a light to dark mode toggle using HTML, CSS and a little bit of JavaScript. I show you the full coding tutorial, where I create the structure of the elements in HTML with an input of checkbox and a label tag.Then I write all of the functionality within JavaScript to monitor when the input is checked and its status. Finally I add styling and transition effects with CSS and a ::before pseudo element to represent the state of the toggle.

Codepen: https://codepen.io/angeladelise/pen/Q...

In this video I show you:
0:31 - Starting HTML Code
1:00 - Starting CSS Code
1:17 - HTML Code - Input, Label
2:49 - JavaScript Code
3:13 - JavaScript variable
3:49 - JavaScript addEventListener
4:10 - How to write a JavaScript function
4:23 - checkMode() Function
4:50 - How to check state of a checkbox
5:50 - How to add a class to an element in JS
6:31 - How to remove a class to an element in JS
7:50 - CSS Styling
8:26 - How to create a custom label with CSS
9:42 - How to style a toggle with CSS
10:27 - How to add a ::before property
11:19 - How to change CSS when checkbox is checked

Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: https://www.youtube.com/watch?v=D3ZF2...

Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog:   / angeladelise  

#colortheme #darkmode #darkmodetoggle