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:
github.com/kaizhelam/Light-Da...
⏱ 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:
www.bootstrapcdn.com/fontawes...
🔥 Want to master JavaScript? Get the complete JavaScript Book: kaizhelam.github.io/JS-Note-B...
Get my Java Tutorial Book online for Free:
cutt.ly/3c31V87
👍 Subscribe for more tutorials like this: bit.ly/2Oajh4C
Check my Personal Website: kaizhelam.github.io/website.com/
⭐️ Want to learn more from me? Check out these links:
Java Programming Tutorial from scratch to advanced
• Playlist
HTML 5 Tutorial from scratch to advanced
• Playlist
CSS 3 Tutorial from scratch to advanced
• Playlist
JavaScript Programming from scratch to advanced
• Playlist
Data structure and Algorithm in C++
• Playlist
Please like and subscribe to my channel and press the bell icon to get new video updates.
💖 Thanks for everything!

[@hils1015]

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

[@balenmohammed1657]

You make JavaScript easy to understand and create projects

[@parodimiguelangel2889]

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

[@CodeCreativeYT]

Glad it helped!

[@jltg34]

Thanks a bunch! Very helpful.

[@CodeCreativeYT]

My pleasure, glad to hear that is helpful!

[@chessgames1984]

Thank you! Good way of explaining. New subscriber

[@CodeCreativeYT]

Thanks for the sub!

[@williamkakooza4603]

Thank you😊

[@eruditostecnology2568]

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

[@CodeCreativeYT]

Most welcome!

[@lorefort]

Brilliant! Thank you.

[@CodeCreativeYT]

My pleasure, thanks too!!

[@azri6210]

good content like always ! ✨👑

[@CodeCreativeYT]

Thank you 🙌

[@siadetx7552]

thank you bro

[@mrunknown_811]

thank you

[@syedsamiulhuda9829]

Awesome explanation bro

[@CodeCreativeYT]

Glad you liked it

[@mokho3027]

good one

[@mohammednabeel4357]

good job

[@edmarkplays376]

Thanks I like your content sir

[@CodeCreativeYT]

Thanks and welcome

[@GoD_LeveL_444]

It's helped ❤

[@alesongalvez7228]

How do we implement the local storage here? Thanks

[@hayksedrakyan1086]

Thanks my brother

[@CodeCreativeYT]

My pleasure!!

[@santo_59]

I love yoy ❤‍🔥

[@abdullahdaoud]

great

[@kazireazulgaming]

Thanks

[@CodeCreativeYT]

welcome bro

[@PeriklesPeriklesoglu]

thanks

[@CodeCreativeYT]

You're welcome!

[@arushatirkey7746]

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

[@dapolcio3405]

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

[@user-rk5id2hm2p]

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

[@azatprojazz]

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

[@CodeCreativeYT]

Hi bro, is one dark pro theme.

[@Telugupuranalu]

❤❤

[@cypherecon5989]

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%); }

[@novavanguard1313]

Its showing cannot read property of toggle

[@ArtsphereOfficial]

Is it possible in android?

[@BlackCherry11140]

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

[@CodeCreativeYT]

Hi bro, what's the error message ??

[@BlackCherry11140]

@@CodeCreativeYT when i turn dark mode my navbar brand and link are also black and i cannot see them in dark mode

[@user-ue7fz8oh1y]

is it working

[@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.

[@oxy-5313]

You can use localstorage

[@MKSundaram]

@@oxy-5313 Do you have any tutorial on how to use localstorage for this purpose?

[@adheeshburthia3584]

When reload it returns to light mode🥲

[@the.element.rosado]

JS looks complicated until you explain each line of code. 🙌🏼 Create a VS Code Extension of you Pseudo coding…

[@SmashCoder12]

Where bi moon img?

[@MatrixBateman]

Do we have to always toggle to get dark mode?

[@CodeCreativeYT]

Ya

[@sanketchavan5179]

Jarvis ka source code de do bhai please

[@Quiz_19]

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

[@CodeCreativeYT]

please check the correct path

[@roselynbasan1326]

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

[@CodeCreativeYT]

Yes, you can

[@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

[@CodeCreativeYT]

Hi, bro. ok when you like your javascript file from html what you have to do is like this below

[@CodeCreativeYT]

this way they will load the js first then next html, ok

[@CodeCreativeYT]

[@mscit_08_omprakash40]

written same code but its not working i tried for the second time but no

[@CodeCreativeYT]

Hi, can you show me your error message please?

[@umiddev007]

help me ,pleace

[@CodeCreativeYT]

Hi, bro. yes I'm happy to help

[@codewithchi3fkabbz572]

help me, it doesn't work 🤦🏾‍♂

[@CodeCreativeYT]

Hi, what is the error message you got?

[@spyders4445]

He

[@arianclick4701]

😓😓wtf

[@anuragmule1926]

It really work on all break point..?? 🥲🥲