Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

[@slayingthedragon]

Just to let everyone know, at 13:49 I define an arrow function but I forget to assign it in a variable. Code still works though but, you should probably add the const before handleToggleTheme. I'm a silly goose.

[@avijitroyankan305]

i was surprised at that time 😆

[@shreyanshrathore6782]

Loved the way, how you explained short circuiting....

[@rupiik]

You are AMAZING at explaining things! Showing examples, how one element is connected to another and giving most practical information as simply as it need to be.

[@Vaannnard]

Amazing videos! I've binge watched through your channel today and I'm happy I found it. It explains css units, flexbox, grids, positioning and very useful general knowledge really well!

[@valentino8195]

Awesome and easy to understand video! Thank you very much. Cant wait to implement this to my own website. Keep up the great work. Greetings from switzerland

[@andreirusen8410]

Really good video! Very explicit and informative!

[@NYDEV0]

You deserve millons of subs

[@slayingthedragon]

Thank you 😊❤

[@royalgreenchannel574]

please upload the videos on regular basis. at least weekly once . your videos are something special. make a videos on full stack development.

[@itsmo_01]

Next time do a calculator with js pls !!

[@mujtabakhan4521]

you are my favouritteeeeeeeeeeeeeeeeeeeeee

[@Zynix-]

You are so good at explaining things, your tutorials are so underrated 🔥 your tutorials deserve attention..

[@slayingthedragon]

I appreciate that!

[@DannyH77]

@@slayingthedragon when will JavaScript course be ready? i love the way you teach!!

[@slayingthedragon]

@@DannyH77 Thank you, I just released the CSS course and courses take time to complete, so we're many months away from the JS course unfortunately, I'm doing my best though and I appreciate the interest 🙂

[@DannyH77]

@@slayingthedragon OK ,Thank you

[@DannyH77]

@@slayingthedragon I'm still struggling with grid, so I'll just keep practicing with that, and css animation until you put out JavaScript course

[@methodboss6719]

Who wants a full course from this guy The way he teaches it's so understandable And excuse me for my English because I am not good at my English

[@Sonya_Makepeace]

Your English is good, don't worry.

[@SaladHood]

I hope you produce more content mate. Your videos are so short and concise and I learn a lot from them. Very easy to understand and follow along.

[@Palisis]

Those extra 3 mins at the end are golden

[@antoniotopic6196]

Post more tutorials about JS. You are teaching better than Ask Lixi (and she is better than others!)

[@bilaltoor123]

Your are very helpful for me friend lovee from Pakistan ❤️❤️❤️

[@vilassa]

Hey man, are you still alive? I just discovered your channel, and you rock. Give us more tutorials, for sure with the correct affiliate programs you can make some good money, and it will be useful for us. Keep rocking, cheers|

[@TheWabbbit]

To implement darkmode without JS, @media (prefers-color-scheme: dark) in CSS. do the work?

[@kudrah]

Best Teacher. Please make more JavaScript Videos as well. You're enhancing my programmer thinking process.

[@fexrihesenov8045]

Where are you ? Please come back ) We need more more new tricks, 3d and moreover which contain js projects

[@abbdd-zg7zy]

thanks from syria and wish you Continue 🌹❤️

[@wiz8058]

please am new to react and am having issues. Can you do a video on react? Touching on basic and one videos to create a single page website.

[@molostv2786]

Young (14y/o) developer and i have to say, your videos are one of the most helpful ways i get new information on coding! much love from Kosovo

[@slayingthedragon]

That's so awesomeee! I hope you keep at it - I'm sure you'll go far !

[@AkibAhmadGaming]

@molostv2786 same here

[@jimi2004]

I had never felt so comfortable learning with KZbin videos until I came across your channel, I hope you can upload more content like this, because you really make very good content, I hope you can make a video about sidenav and how to align it correctly with Main in the center and the articles on the right side. Greetings from Mexico 🇲🇽

[@hamzaashraf1776]

Your videos are the best on youtube about basic frontend. I need to understand the concept of :before and :after with the content:"" seems like a challenging video.

[@shahnoormughal6553]

You are doing very great. Please more vedios like thesee❤

[@defichronicles]

Amazing!

[@Amar-b9j4c]

bro ure the best

[@methodboss6719]

Create a full course on CSS and JavaScript

[@slayingthedragon]

I'm working on a CSS course right now! And after I'll release a free JS course on KZbin as a playlist :p

[@shubhamshukla7778]

Bro please make video on Java script full

[@shahnoormughal6553]

Make a complete javascrit course plzz❤

[@malekgharyani2339]

u are too good broo keep going

[@TheChiaralyn]

Thank you so much, your video are amazing! Hugs from Italy 😊

[@ShawnRitch]

You wouldn't happen to know any DeMarco's there in Italy, would you?

[@bowbowbow22]

You're an exquisite instructor.

[@dreamcatchermarketing4783]

Thanks

[@mohamedibrahemsaad573]

please come back We miss your channel

[@HexFireGaming1]

Bro upload new video related to css

[@UniversaL_]

Can u pls created a video on javascript

[@zancrow_gaming]

Bro I had issues understanding the guard operators coz I just started javascript. But I understand almost everything I see here. Well explained💯

[@reromsp]

Expecting more js videos

[@JulianStark]

Thanks for the great video! One question but I might be wrong: I think you put the js to the footer or end of body. Let’s imagine this is a big site with lots of content in the body. So if I load a new page and I’m already in dark mode I guess the colors will only switch to dark after the page has loaded and the js has been started. There will be some kind of flash from light to dark. Right? Would it be better, to put the code to the head?

[@slayingthedragon]

Hey, I found this stackoverflow with a similar question to yours, the answer is pretty good! stackoverflow.com/questions/71799083/white-flash-on-dark-mode-on-refreshing-page

[@JulianStark]

@@slayingthedragon thank you! so I guess the JS should be in the head with no defer in it

[@yoanmitrev]

Hey man, I have watched all of your videos and I have to say nobody has ever taught me that much about coding. Maybe in the future you can make a video about drop-down menus and how to make them. I'm sure this will be of great use. Thanks!

[@slayingthedragon]

Great suggestion thanks you ☺️ !

[@ZockaRocka]

I really like your code 😊 However i think it would have been even better to use the returned value of the toggle method from the DOMTokenList for the if condition in the handler

[@mountacer4159]

You are amazing ❤ love the way you explaine 😊

[@kyrilevangelista4056]

Very informative and helpful, thank you so much! Subscribed as well

[@jaydeepgill218]

Your flex, grid and other css videos are too great.... please also make some videos on JavaScript ...i am really finding it hard....

[@slayingthedragon]

I will, I'm just finishing up my CSS course and I'll come back with weekly content on KZbin !

[@KeyStroke_IT]

Love your work bro. Well paced and detailed videos. I'm watching from Nigeria. ✌🏾

[@alimansimov1929]

Truly excellent, when will your JS course come? I saw it on your website.

[@slayingthedragon]

Some time during the summer

[@alimansimov1929]

@@slayingthedragon the method you taught in this video was excellent I have never ever seen something like. I hope the method will be same.

[@johndoe8091]

Amazing videos dude, do you have a video on how to decouple scroll transitions from theme switching?

[@jeremiah869]

Literally the best web-dev content in the game, what an amazing channel

[@Onik_the_computer_geek]

Love ur content bro

[@bonezonechannel]

awesome! easy to follow, and allowed me to easily customize more to my wants. will be trying this method with another theme idea other than colors.

[@joelrhine]

The "floating there in nothingness" made me laugh more than it should have.

[@raunak_saha]

" We can do better"

[@Avarn388]

Excellent job. I really loved how you explained short circuiting. It’s such a powerful concept of JavaScript and when leveraged here, it makes a worlds difference.

[@nghialenguyenduy8386]

good job man 🎉🎉

[@amdjed_mijoukh]

can you talk about images and background properties and when to use them.ty and gj your content is very good and not too long

[@ericaimhigh]

I'm here again. Your explanation is top notch

[@thatoneshortkidjordy2144]

Dddamn, how you good at css and brawl 😔

[@slayingthedragon]

Haha this one is actually JavaScript but thank you ☺️❤️

[@parthshandilyaiitr]

You need to start a course or something

[@slayingthedragon]

❤️❤️❤️

[@ronaldawudi-ackerman905]

Thanks

[@srshah]

Hey buddy do you use these concepts in production apps as well?? Or do you use any UI libraries??

[@slayingthedragon]

I use React and NextJS for anything production. However if I were tasked to do this in vanilla JS for production, I would do it exactly like I did it on the video.

[@srshah]

@@slayingthedragon Seeing from your portfolio video I'm guessing you use tailwind with Next JS🤔, I use the same. Can you advise me on usage of libraries like chakra in NextJS apps or should I stick with css/tailwind.

[@slayingthedragon]

@@srshah I can't speak for Chakra I've never used it. For styling I either use TailwindCSS or CSS Modules alongside NextJS. TailwindCSS is the only styling library I used, otherwise I really like normal CSS

[@samplechannel2312]

Yes... really great explanation...❤ We need entire real time project ( js or react) with same level of explanation

[@Garvitjain-ru4ci]

I am totally counting on you. Also expecting more content like this.

[@ifunanyablessing3411]

nice video, I love ur teaching style please can u make a complete css lesson

[@andei9743]

Beautiful explanation

[@sayanghosh6996]

Good content as always, also liked the playfullness on this one!

[@slayingthedragon]

Thank you ❤️❤️

[@avijitroyankan305]

💯💯

[@alqudesalislami]

you are really professional, could I ask how many year do I need to become like you, I am still beginner?

[@slayingthedragon]

Heyy, everyones journey is going to be different, you just need to do your best and not give up ❤

[@tauromusic96]

Hey good video! have a question, when i refresh the page still in dark mode it didn't change in sun but remain moon so i have to double click on it to return in light mode, how can i fix that? Thanks

[@tauromusic96]

I used font awesome icon so they change on click

[@kilimanjaro8075]

Pls java script tutorial series 🥲🤌

[@CornSensei]

Amazing Video! Very clear and works great! 💯 Just wondering if you knew how to make it remember your icons for dark/light modes on refresh? For example I have a moon for dark mode and a sun for light. Thanks in advance 😄

[@sylojos]

Hello I have a question regarding the making the code more readable, where do I place the function? Place it under handlers comment or place it at the very top of the code or at the very bottom of the code? function abc() { alert("Hi"); }

[@slayingthedragon]

Placing it under the handler comment makes it the most readable. You don't want your functions at the top, it makes more sense to have your selectors at the top. I didn't invent this pattern, JavaScript frameworks like React use a very similar structure and the way I structured it in the video is most recognizable for other developers.

[@sylojos]

@@slayingthedragon Thank you! Love your videos. I hope you consider to upload framework tutorial in the future.

[@nirajpathak99]

Ternary operators can be used to shorten the code.

[@slayingthedragon]

Did you watch the entire video ?

[@nirajpathak99]

Yeah 👍 I know what you mean

[@slayingthedragon]

Much love ❤️

[@nirajpathak99]

@@slayingthedragon Hey I'm working on a personal project. Need to use REM as breakpoints. But it has issues so JS implementation will work I guess.

[@Gomnojedac]

What is this theme in vs code? Thanks

[@slayingthedragon]

one dark pro