Dark Mode Toggle | HTML CSS JS Tutorial

Veröffentlicht am: 25 Mai 2020
auf dem Kanal: Angela Design

9,776

394

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

Auf dieser Seite können Sie das Online-Video Dark Mode Toggle | HTML CSS JS Tutorial mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Angela Design 25 Mai 2020 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 9,776 Mal angesehen und es wurde von 394 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

625