How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS

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

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

  • @dublUayaychtee
    @dublUayaychtee 3 года назад +148

    This video makes the light and dark mode toggle so much easier. Thank you!

  • @ussardor
    @ussardor 3 года назад +102

    Thank you so much. I'm teaching my students with the help of your videos. We are writing your projects in class.

    • @GreatStackDev
      @GreatStackDev  3 года назад +19

      Wonderful!

    • @webwizard4219
      @webwizard4219 3 года назад +48

      What kind of teacher are you?😂😂😂

    • @jaskaran_lol
      @jaskaran_lol 3 года назад +3

      @@webwizard4219 😂

    • @anything-anything700
      @anything-anything700 3 года назад +3

      @@webwizard4219 😂😂

    • @GreatStackDev
      @GreatStackDev  3 года назад +6

      Must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @avion_
    @avion_ 3 года назад +35

    I actually like this type of explanatory videos, rather than the trendy fast forwarded ones. Good job sir. Have a nice day ahead.

  • @jgnmas
    @jgnmas 2 года назад +20

    I am so glad I was recommended this by YT.
    I love little details that make things better. I’ll be super happy to offer this on my site! Thank you so much!

  • @laylaaam4310
    @laylaaam4310 3 месяца назад +2

    this was the ONLY video that did not make it complicated, thank you so so much for the clear and concise tutorial!

    • @GreatStackDev
      @GreatStackDev  3 месяца назад +1

      I am really glad to hear that. Thank you! 😊

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

    i am learning the art of building frontends which a user will continue seeing
    your channel is like a jackpot for me
    you are amazing brother

  • @Sumit-pm4uj
    @Sumit-pm4uj 3 года назад +6

    I watched it today, My all doubts about dark mode are clear, your explanation are awesome 👏❤️

  • @the6250
    @the6250 2 года назад

    I see how it is RUclips. You show me this ad everyday and I ignore it, but now you're actually recommending me this video.

  • @programmernotes4365
    @programmernotes4365 3 года назад +22

    THIS IS AMAZING, I'M SO HAPPY RIGHT NOW 😍😅

  • @coderknight-8744X
    @coderknight-8744X Месяц назад

    THE EASIEST VIDEO I have seen to make dark mode ! Period.

  • @rajithagirijadevi5050
    @rajithagirijadevi5050 3 года назад +4

    I had to create toggle between dark and light mode this week and this video made it real easy to implement. Thanks a lot !!

  • @sergeialekseenko3545
    @sergeialekseenko3545 3 года назад +20

    So easy but so much helpful,thanks a lot man!

    • @GreatStackDev
      @GreatStackDev  3 года назад +2

      Glad it helped! Please must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @avimishra8263
    @avimishra8263 3 года назад +2

    Bhai kya video banaya hai ......... agr hindi nhi aati toh english mai bhi lele yaar ............... Damn awesome video saved a lot of time .. Thanks and keep making such awesome videos.

    • @GreatStackDev
      @GreatStackDev  3 года назад +1

      Thank you Avi bhai, Iska 2nd part jrur dekhne, dark mode ko browser me save karne ke liye: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @chaituvsh5574
    @chaituvsh5574 3 года назад +1

    This is the easiest and the best explanation. You are a champion.

  • @miguelgiraldoduke9711
    @miguelgiraldoduke9711 3 года назад +4

    You have improved your channel a lot, you were very helpful, thank you !!

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

    Thank you so much❤ Now I have completed my project. ❤❤❤❤

  • @amaanmajeed4068
    @amaanmajeed4068 2 года назад

    Mannnnn.. love you soo much. I tried a lot of other methods but this one was the one which worked for me.. coming from someone who is a newbie at HTML and CSS. 💓

  • @yetix_bo
    @yetix_bo 3 года назад +5

    thanks for everything, greetings from La Paz Bolivia ... South America .... Go ahead and thank you for sharing all your knowledge. God bless you.

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thanks to you. must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @abhijiths148
    @abhijiths148 3 года назад +9

    I am wondering why he is not using inspect element 😂😁
    Helpful video 🤘

  • @fateen4229
    @fateen4229 3 года назад

    This is the best RUclips channel to learn website development.

    • @GreatStackDev
      @GreatStackDev  3 года назад +1

      Thank you, glad you like my channel

    • @fateen4229
      @fateen4229 3 года назад +1

      @@GreatStackDev your videos helped me a lot. God bless you

    • @GreatStackDev
      @GreatStackDev  3 года назад +2

      must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

    • @fateen4229
      @fateen4229 3 года назад

      @@GreatStackDev much needed video 👍

  • @dlgsh
    @dlgsh 3 года назад +13

    Hey I really liked the video! ❤☀️💚🇮🇳

  • @chandupaart2005
    @chandupaart2005 3 года назад +2

    Tutorial is so clear and with your sound it is easier to understand...
    Thank you

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thank you Niroo. glad you like this dark mode website video.

  • @reivaxerubiza2204
    @reivaxerubiza2204 2 года назад +1

    Nice, found out what I was doing wrong. I put the script at the tag when instead I should be putting the script at the tag. Thanks for the video, very informative.

    • @samsonogunrinde
      @samsonogunrinde 11 месяцев назад

      You are not wrong

    • @samsonogunrinde
      @samsonogunrinde 11 месяцев назад

      It’s better one get his or herself familiar with putting the script in the head other than in the body

    • @samsonogunrinde
      @samsonogunrinde 11 месяцев назад

      It’s is ok to put in the body for small projects like this one and rather better in the head tag for bigger projects

  • @МидхатФайрушин
    @МидхатФайрушин 3 года назад +2

    Good, and clear video! Thanks!
    I am writing a comment to increase the ranking!

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thank you so much, must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @an802adam
    @an802adam 2 года назад

    Dood, this is impressively simple. I'm going to see if this works with my client's wix site right now. Thank you!

    • @an802adam
      @an802adam 2 года назад

      i wish Wix allowed us to declare css elements so we could use this method. Sadly, they don't. Wix creates unique element IDs and Classes on each reload so I'm going to have to use another method. Thank you very much for this great video.

  • @mohammedanwar1165
    @mohammedanwar1165 3 года назад +1

    Thanks a lot my dear teacher ...
    Ur student from yemen💚💚💚

    • @GreatStackDev
      @GreatStackDev  3 года назад +1

      Thanks, Please check it part 2 also, to same dark mode in browser: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @lucenzowalker1362
    @lucenzowalker1362 3 года назад +1

    Thank you friend! You explained this soo good. Now working on my website project for school. Thanks!

  • @logichunga74
    @logichunga74 2 года назад

    Awesome u r helping billions of programmers

  • @migoypro3370
    @migoypro3370 2 года назад

    this channel deservrd a million views and subcriber its very useful and amazing tutorial easy to learn

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

    SIR YOU ARE GREAT YOUR LEARNING STYLE WAS SOOOOOOOOOOOOOOO EASY

  • @TURKISTONIM2
    @TURKISTONIM2 3 года назад +1

    Honestly respect for you thanks bro you solve my problem ✔️✔️✔️👍👍👍👍👍👍

  • @_Lifer_Gaming
    @_Lifer_Gaming 2 года назад

    Your a beast bro, not just changing the background color and text color but the buttons as well

  • @anilreddy8475
    @anilreddy8475 2 года назад +1

    Thankyou so so much man. Great tutorial keet it up..

  • @Rs-nh7zx
    @Rs-nh7zx 3 года назад +3

    Please make multi page website with this, that’d be amazing!

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

    Hey bro thanks , i used to do them one by one adding a class to each one until some guy on discord told me to to do a handler or whatever at the top and i found your video to do it.

  • @abdssamad5246
    @abdssamad5246 3 года назад +1

    You are a legend and your tutorials are amazing❤❤

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

    Just Amazing..... Thank you Bro.

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

      Glad you liked it. Thanks for your comment. 😊

  • @muhammadhasnain682
    @muhammadhasnain682 2 года назад +4

    bruh i feel sad why you should not approach 1 M subscriber love from Pakistan

  • @IanLaRueLaVraie
    @IanLaRueLaVraie 2 года назад

    this is the best video tutorial that i have ever seen, good job!

    • @GreatStackDev
      @GreatStackDev  2 года назад

      glad you like this dark mode website tutorial

  • @AbuBakar-fr8yy
    @AbuBakar-fr8yy 27 дней назад

    Sweet voice, powerful video ❤

  • @dadaflicker5004
    @dadaflicker5004 2 года назад

    This method is new for me, but it's easier and makes the code less lengthy.
    Before this I use to individually change every color on website twice..😅
    You earned yourself a new subscriber👍

  • @MahendraPremKumarBalla-nm4dk
    @MahendraPremKumarBalla-nm4dk 3 месяца назад

    I'm completely understand positions concept ❤🎉

  • @ramalsrougi
    @ramalsrougi 3 года назад

    You're the best.. I SWEAR 🙌😍❤❤❤

  • @alihakimoglu1189
    @alihakimoglu1189 3 года назад +12

    Thank you, man!!!
    You are a life savior
    Really appreciate your content

    • @GreatStackDev
      @GreatStackDev  3 года назад +1

      Hi Ali, Must watch this video, to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @sairajrajput4857
    @sairajrajput4857 2 года назад

    It works.
    thank you sir for such amazing videos.

  • @franklinmayoyo
    @franklinmayoyo 2 года назад

    I l oved how clean your website and code is. thanks for the nice explanation. You got a new sub

  • @An-yh2bl
    @An-yh2bl 2 года назад +1

    It´s fantastic and your explanations are also really good! :)

  • @Zsh3107
    @Zsh3107 2 года назад

    Very very helpful
    Thanks a bunch
    Plz plz make more of these amazing short videoes on java script
    God bless ya❤

  • @radhenandhika9700
    @radhenandhika9700 3 года назад

    A lot of thank you from me sir...good job 😎 U have a great video and i love it...thanks 😄

  • @Zsh3107
    @Zsh3107 2 года назад

    I think toturuals with a bunch of js in one video get us tired
    This new serues of your amazing and useful short js toturials in projects are juste the best on youtube

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

    Bro thanks for this video ❤ , it's so easy to understand, Thankyou

  • @XPrime_05
    @XPrime_05 2 года назад

    your videos are the best so far, thank you

  • @james-404
    @james-404 11 месяцев назад

    This was a great explanation, thank you brother

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

    u got a subscriber for this.. Good Day!😃

  • @sahirulwebofficial7375
    @sahirulwebofficial7375 2 года назад

    The video is very nice. The concept is cleared. Thanks

  • @shubhammali2109
    @shubhammali2109 2 года назад

    superb sir thank you so much greatfull....plz keep making such videos

  • @Dan-ez4xv
    @Dan-ez4xv 3 года назад

    Very helpful for my competition ♥️🤘 Thanks.

  • @Ghostfancoder
    @Ghostfancoder 3 года назад

    Bro thank you for explaining things so easily. I am glad i found your channel

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

    This was such a great video. It made it a hundred times easier

  • @MrWebDesignerAnas
    @MrWebDesignerAnas 3 года назад +2

    this is what I have been looking for...
    thank you so much sir.

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

    Thank you my bro for sharing this amazing website i really appreciate it 👍👍

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

    Great content Please keep uploading these kind of videos

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

    This worked for me thank you so much ❤️

  • @engidabirhanu8871
    @engidabirhanu8871 3 года назад +1

    It is so amazing I like it so much
    and you are so kind

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

    great video, very useful, thanks for the knowledge bro 🔥

  • @melvinprince7149
    @melvinprince7149 2 года назад

    Your Videios are amazing.
    Thankyou So much

  • @AmitKumar-cp1oz
    @AmitKumar-cp1oz 4 месяца назад +1

    Thanks GreatStack for a Great Video!

    • @GreatStackDev
      @GreatStackDev  4 месяца назад

      Glad you enjoyed it Amit! Thank you 😊

  • @Abbatyya
    @Abbatyya 3 года назад +1

    bro you videos are very useful and educative

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thank you bro, must watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @dedse3
    @dedse3 2 года назад +3

    Awesome video, thanks a lot! You turned this feature into something really easy to do when I was struggling trying to make it!

  • @ovskihouse5271
    @ovskihouse5271 3 года назад

    That's awesome for bignrs to learn from... Inspire

  • @9bhatti9
    @9bhatti9 2 года назад

    Thanks Sir Yours videos are veey Knowledge able

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

    thank you , your solution is so helpful

  • @syberiaok
    @syberiaok 2 года назад

    Great tutorial!thanks! Thank God for dark mode! :)

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

    This was very helpful, thanks!

  • @prasad4718
    @prasad4718 2 года назад +2

    I was just not get that how you changed entire web text color when click event occurs.
    By the way thank you for this project.

    • @GreatStackDev
      @GreatStackDev  2 года назад +1

      that click event added a new class name "dark-theme" in the and this dark theme class contains new color codes for the website

    • @prasad4718
      @prasad4718 2 года назад

      @@GreatStackDev Thank you perfectly got it!

  • @mahmudulhasanjoy5466
    @mahmudulhasanjoy5466 3 года назад

    Superb Ninja Simple technic used dark-them. Thank you so much.

  • @alexmaglak
    @alexmaglak 11 месяцев назад

    Thank you very much, this helped me a lot.

  • @atrikashow8118
    @atrikashow8118 2 года назад +1

    very beautiful video
    thank you😊

    • @GreatStackDev
      @GreatStackDev  2 года назад +1

      Glad you like this dark mode website tutorial

  • @kalahira1018
    @kalahira1018 3 года назад +2

    Thank you so much brother😀

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thanks to you, Please check it's part 2 also.

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

    This did it! Thank you so much.

  • @veengez1284
    @veengez1284 3 года назад

    Thank you for the tourial friend, greetings from Indonesia

  • @laxmanaraoarasavilli2919
    @laxmanaraoarasavilli2919 2 года назад

    Thank you for clarifying my doubt...................

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

    you just save a brother thank so much

  • @subratapanda8495
    @subratapanda8495 3 года назад +2

    Such easy explanation.. Loved it. Thankyou ❤️

  • @nirmalas9939
    @nirmalas9939 3 года назад +1

    Thank You , Its very help full .

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Glad it helped, Please check it's 2nd part also: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @BossMakzzz
    @BossMakzzz 2 года назад

    Super Very Helpful 👍🙂🔥🔥

  • @artnardone
    @artnardone 3 года назад

    That's great , a lot of happy people thank you,& thumbs up. I am a dummy and don't know what your talking about beside the language barrier. The problem with you tech geeks is you can not communicate. with somebody 50 years old and up.

  • @ampomahkofi7238
    @ampomahkofi7238 3 года назад +1

    Your tutorials saved me slots boss

  • @hightommy7961
    @hightommy7961 3 года назад

    Best teacher, thank you your leason. 👋

  • @g.kathirvel8959
    @g.kathirvel8959 3 года назад +1

    Everyone video is really helpful bro

    • @GreatStackDev
      @GreatStackDev  3 года назад

      Thank you bro, Please watch this video to save the dark theme on browser to keep dark theme active on page reload: ruclips.net/video/2j_kBqpFK-g/видео.html

  • @richardsnyder6413
    @richardsnyder6413 2 года назад

    This is awesome 👏 Thank you 🙏

  • @channakkranh
    @channakkranh 3 года назад

    The best channel😍

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

    Thank you so much for this tutorial.

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

      You are so welcome! Glad you liked this light mode to dark mode website tutorial

  • @rybizzzreacts4258
    @rybizzzreacts4258 2 года назад

    WOW this was short and easy thank you!

  • @funnyanimalworld7579
    @funnyanimalworld7579 2 года назад +1

    Add a function on button to flip collours of every element you want color changed.

  • @shaheenislam2088
    @shaheenislam2088 3 года назад +2

    bro please you give us (bootstrap 5 & javascript) basic to advance tutorial........??
    your tutorial on of the best tutorial

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

    Just amazing dude

  • @blosomit2090
    @blosomit2090 3 года назад

    Like it a lot! Many interesting things :)

  • @roswikaluruli1246
    @roswikaluruli1246 3 года назад

    thank you so much this worked perfectly!

  • @balapramothc.m.
    @balapramothc.m. 3 года назад +3

    Superb bro but pls teach us how to connect all the webpages. That is we have link the menu bar with anchor know how do we connect dark mood for those page . What is by clicking on the moon button in home page it should reflect to other pages also how do we do that . please explain bro

    • @GreatStackDev
      @GreatStackDev  3 года назад +1

      Hi Bala bro, you can check my other video of multi page website design to connect all pages in navigation menu, this video concept is just to teach dark mode design. Here you can watch the multiple page website design: ruclips.net/video/oYRda7UtuhA/видео.html