Light/Dark Theme Toggle using HTML CSS & JavaScript

👋 Hey Friends!
In this video, you will learn how to create a Dark/Light Theme Toggle effect using vanilla JavaScript.

Light/Dark Theme Toggle Source Code:

⏱ Timestamps
00:00 Intro
00:07 Quick Demo
00:34 HTML Tutorial
2:06 CSS Tutorial
3:29 JavaScript Tutorial
6:30 Final Result Testing
7:44 Thanks For Watching

Bootstrap CDN Font Awesome:

Get my Java Tutorial Book online for Free:

⭐️ Want to learn more from me? Check out these links:

Java Programming Tutorial from scratch to advanced

HTML 5 Tutorial from scratch to advanced

CSS 3 Tutorial from scratch to advanced

JavaScript Programming from scratch to advanced

Data structure and Algorithm in C++

Please like and subscribe to my channel and press the bell icon to get new video updates.
💖 Thanks for everything!

[hils]

So quick and straight to the point and very well done video. Thank you!

[balenmohammed]

You make JavaScript easy to understand and create projects

[parodimiguelangel]

awesome and useful, thank you!! it really helped me in my project

[eruditostecnology]

Thanks for sharing!, i really help me in my project

[chessgames]

Thank you!
Good way of explaining.
New subscriber

[alesongalvez]

How do we implement the local storage here? Thanks

[rkidhmp]

pls put link you get in bootstrap because I can't find it.Thank You

[arushatirkey]

The code ran except of the background colour which you mentioned.Can you help by saying what might went wrong?

[cypherecon]

When I try translate(-50%, -50%) it does not work. This brings it somehwat in the middle: Do you know why?

i{
font-size: 50px;
position: absolute;
cursor: pointer;
top: 50%;
bottom: 50%;
transform: translate(1500%, 50%);

}

[novavanguard]

Its showing cannot read property of toggle

[azatprojazz]

Tell me buddy, what theme do you have installed? I like the color of the syntax in your javascript. Write down what plugin?

[BlackCherry]

help me when i toogle to dark mode my body part text are all white but navbar text are in black color so i cant see them how to fix that

[dapolcio]

This is good for two elements website. If you wanna use it for complex site it's useless.

[MKSundaram]

How do I make it permanent change? I mean I want the change should be saved and when I refresh or reopen the page it should open with the new theme.

[Quiz_]

in my code i used src to change image but the code is note working

[futureherohafizabad]

hy dear its not working, it show error in js and when i click to switch in drak mode no js apply even i follow all your step and source code but its not working. tell me what i should i do now

[MatrixBateman]

Do we have to always toggle to get dark mode?

[sanketchavan]

Jarvis ka source code de do bhai please

[roselynbasan]

sir can i download your JavaScript book, in your github?