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

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 107

  • @slayingthedragon
    @slayingthedragon  Год назад +25

    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.

  • @shreyanshrathore6782
    @shreyanshrathore6782 Год назад +13

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

  • @Palisis
    @Palisis Год назад +8

    Those extra 3 mins at the end are golden

  • @kudrah
    @kudrah 8 месяцев назад +1

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

  • @molostv2786
    @molostv2786 Год назад +19

    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
      @slayingthedragon  Год назад +4

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

    • @AkibAhmadGaming
      @AkibAhmadGaming 6 месяцев назад +1

      @molostv2786 same here

  • @SaladHood
    @SaladHood Год назад +11

    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.

  • @SohaibHasan
    @SohaibHasan 16 дней назад +1

    No way! You gotta be kidding me. Was is that simple ❤ Love it. I've been actually looking for something like this and glad I found this tutorial. Not sleeping tonight, excited to put things in action. 🎉

  • @rupiik
    @rupiik Год назад +3

    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.

  • @Zynix-
    @Zynix- Год назад +33

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

    • @slayingthedragon
      @slayingthedragon  Год назад +2

      I appreciate that!

    • @DannyH77
      @DannyH77 Год назад +1

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

    • @slayingthedragon
      @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
      @DannyH77 Год назад +1

      @@slayingthedragon OK ,Thank you

    • @DannyH77
      @DannyH77 Год назад +1

      @@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
    @methodboss6719 Год назад +9

    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

  • @jeremiah869
    @jeremiah869 Год назад +1

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

  • @jimi2004
    @jimi2004 Год назад +3

    I had never felt so comfortable learning with RUclips 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
    @hamzaashraf1776 Год назад +1

    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.

  • @Avarn388
    @Avarn388 Год назад +1

    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.

  • @Vaannnard
    @Vaannnard Год назад +2

    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!

  • @samplechannel2312
    @samplechannel2312 Год назад +1

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

  • @zancrow_gaming
    @zancrow_gaming Год назад +1

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

  • @antoniotopic6196
    @antoniotopic6196 Год назад +1

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

  • @KeyStroke_IT
    @KeyStroke_IT Год назад +1

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

  • @bonezonechannel
    @bonezonechannel Год назад +1

    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.

  • @Garvitjain-ru4ci
    @Garvitjain-ru4ci Год назад +1

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

  • @valentino8195
    @valentino8195 Год назад +1

    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

  • @bowbowbow22
    @bowbowbow22 6 месяцев назад +1

    You're an exquisite instructor.

  • @ericaimhigh
    @ericaimhigh Год назад +1

    I'm here again. Your explanation is top notch

  • @joelrhine
    @joelrhine 7 месяцев назад +1

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

  • @andei9743
    @andei9743 Год назад +2

    Beautiful explanation

  • @kyrilevangelista4056
    @kyrilevangelista4056 11 месяцев назад +1

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

  • @mujtabakhan4521
    @mujtabakhan4521 Год назад +6

    you are my favouritteeeeeeeeeeeeeeeeeeeeee

  • @TheChiaralyn
    @TheChiaralyn Год назад +2

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

    • @ShawnRitch
      @ShawnRitch Год назад

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

  • @abbdd-zg7zy
    @abbdd-zg7zy Год назад +2

    thanks from syria and wish you Continue 🌹❤️

  • @andreirusen8410
    @andreirusen8410 Год назад +1

    Really good video! Very explicit and informative!

  • @jaydeepgill218
    @jaydeepgill218 Год назад +2

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

    • @slayingthedragon
      @slayingthedragon  Год назад +3

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

  • @sayanghosh6996
    @sayanghosh6996 Год назад +1

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

  • @alimansimov1929
    @alimansimov1929 7 месяцев назад +1

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

    • @slayingthedragon
      @slayingthedragon  7 месяцев назад

      Some time during the summer

    • @alimansimov1929
      @alimansimov1929 7 месяцев назад +1

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

  • @bilaltoor123
    @bilaltoor123 Год назад +1

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

  • @malekgharyani2339
    @malekgharyani2339 Год назад +1

    u are too good broo keep going

  • @vilassa
    @vilassa Год назад +1

    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|

  • @dreamcatchermarketing4783
    @dreamcatchermarketing4783 Год назад +2

    Thanks

  • @royalgreenchannel574
    @royalgreenchannel574 Год назад +2

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

  • @fexrihesenov8045
    @fexrihesenov8045 Год назад +1

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

  • @johndoe8091
    @johndoe8091 5 месяцев назад

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

  • @mohamedibrahemsaad573
    @mohamedibrahemsaad573 Год назад +1

    please come back We miss your channel

  • @shahnoormughal6553
    @shahnoormughal6553 Год назад +1

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

  • @reromsp
    @reromsp Год назад +1

    Expecting more js videos

  • @mountacer4159
    @mountacer4159 Год назад +1

    You are amazing ❤ love the way you explaine 😊

  • @ifunanyablessing3411
    @ifunanyablessing3411 Год назад +1

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

  • @Onik_the_computer_geek
    @Onik_the_computer_geek Год назад +1

    Love ur content bro

  • @NYDEV0
    @NYDEV0 Год назад +1

    You deserve millons of subs

  • @amdjed_mijoukh
    @amdjed_mijoukh Год назад +1

    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

  • @ronaldawudi-ackerman905
    @ronaldawudi-ackerman905 Год назад +1

    Thanks

  • @methodboss6719
    @methodboss6719 Год назад +2

    Create a full course on CSS and JavaScript

    • @slayingthedragon
      @slayingthedragon  Год назад

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

  • @TheWabbbit
    @TheWabbbit Год назад +1

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

  • @defichronicles
    @defichronicles Год назад +1

    Amazing!

  • @ZockaRocka
    @ZockaRocka 3 месяца назад

    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

  • @Amar-b9j4c
    @Amar-b9j4c 9 месяцев назад +2

    bro ure the best

  • @nghialenguyenduy8386
    @nghialenguyenduy8386 Год назад +1

    good job man 🎉🎉

  • @shahnoormughal6553
    @shahnoormughal6553 Год назад +1

    Make a complete javascrit course plzz❤

  • @CornSensei
    @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 😄

  • @alqudesalislami
    @alqudesalislami Год назад +1

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

    • @slayingthedragon
      @slayingthedragon  Год назад

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

  • @wiz8058
    @wiz8058 Год назад +1

    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.

  • @JulianStark
    @JulianStark Год назад +1

    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
      @slayingthedragon  Год назад +1

      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
      @JulianStark Год назад

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

  • @itsmo_01
    @itsmo_01 Год назад +1

    Next time do a calculator with js pls !!

  • @srshah
    @srshah Год назад +1

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

    • @slayingthedragon
      @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
      @srshah Год назад +1

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

  • @nirajpathak99
    @nirajpathak99 Год назад +1

    Ternary operators can be used to shorten the code.

    • @slayingthedragon
      @slayingthedragon  Год назад

      Did you watch the entire video ?

    • @nirajpathak99
      @nirajpathak99 Год назад +1

      Yeah 👍 I know what you mean

    • @slayingthedragon
      @slayingthedragon  Год назад +1

      Much love ❤️

    • @nirajpathak99
      @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.

  • @UniversaL_
    @UniversaL_ Год назад +1

    Can u pls created a video on javascript

  • @shubhamshukla7778
    @shubhamshukla7778 Год назад +1

    Bro please make video on Java script full

  • @tauromusic96
    @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
      @tauromusic96 Год назад

      I used font awesome icon so they change on click

  • @sylojos
    @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
      @slayingthedragon  Год назад +1

      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
      @sylojos Год назад +1

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

  • @avijitroyankan305
    @avijitroyankan305 Год назад +1

    💯💯

  • @HexFireGaming1
    @HexFireGaming1 Год назад +1

    Bro upload new video related to css

  • @thatoneshortkidjordy2144
    @thatoneshortkidjordy2144 Год назад +1

    Dddamn, how you good at css and brawl 😔

    • @slayingthedragon
      @slayingthedragon  Год назад

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

  • @parthshandilyaiitr
    @parthshandilyaiitr Год назад +1

    You need to start a course or something

  • @Gomnojedac
    @Gomnojedac 10 месяцев назад

    What is this theme in vs code? Thanks

  • @raunak_saha
    @raunak_saha Год назад +1

    " We can do better"

  • @kilimanjaro8075
    @kilimanjaro8075 Год назад

    Pls java script tutorial series 🥲🤌