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

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

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

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

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

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

    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 года назад +18

      Wonderful!

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

      What kind of teacher are you?😂😂😂

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

      @@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 Месяц назад +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  Месяц назад

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

  • @OmkarShelke-w2j
    @OmkarShelke-w2j 7 месяцев назад +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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Awesome u r helping billions of programmers

  • @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 10 месяцев назад

      You are not wrong

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

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

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

      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

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

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

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

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

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

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

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

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

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

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

    I am wondering why he is not using inspect element 😂😁
    Helpful 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

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

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

    Just Amazing..... Thank you Bro.

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

      Glad you liked it. Thanks for your comment. 😊

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

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

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

    SIR YOU ARE GREAT YOUR LEARNING STYLE WAS SOOOOOOOOOOOOOOO EASY

  • @Happiness-z7l
    @Happiness-z7l 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

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

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

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

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

    I'm completely understand positions concept ❤🎉

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

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

    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.

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

      @@GreatStackDev Thank you perfectly got it!

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

    thank you , your solution is so helpful

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

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

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

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

  • @МидхатФайрушин
    @МидхатФайрушин 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

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

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

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

    This worked for me thank you so much ❤️

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

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

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

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

    you just save a brother thank so much

  • @9bhatti9
    @9bhatti9 Год назад

    Thanks Sir Yours videos are veey Knowledge able

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

    It works.
    thank you sir for such amazing videos.

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

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

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

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

    You are a legend and your tutorials are amazing❤❤

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

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

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

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

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

    Thanks GreatStack for a Great Video!

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

      Glad you enjoyed it Amit! Thank you 😊

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

    Your Videios are amazing.
    Thankyou So much

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

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

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

  • @Happiness-z7l
    @Happiness-z7l 2 года назад

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

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

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

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

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

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

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

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

    This was a great explanation, thank you brother

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

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

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

    Very helpful for my competition ♥️🤘 Thanks.

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

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

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

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

    Such easy explanation.. Loved it. Thankyou ❤️

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

    Your tutorials saved me slots boss

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

    beautifully explained

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

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

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

    Hi your videos are all amazing.
    I just have one question does it apply to all pages or only on the home page.

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

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

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

    Thank you for this tutorial. How would you do to stay in dark/light mode even when you change the page ?

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

      it is made in the send part of this tutorial: ruclips.net/video/2j_kBqpFK-g/видео.html

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

    Thank you very much, this helped me a lot.

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

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

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

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

  • @rang.luthfi
    @rang.luthfi 3 года назад +2

    thanks this video helpful for me, because i'm made dark theme the code is too long and not easy to read. i dont know there has alternative code is like this.

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

      Glad it helped! 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

  • @leondo6867
    @leondo6867 2 года назад +6

    Hello, I love your video on changing the web page from light to dark. I was wondering how can I make the theme as default as if I switch from light to dark then go to another page but I want it to remain as dark theme

    • @fonkar3310
      @fonkar3310 9 месяцев назад

      have you found out the answer?

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

    Great content Please keep uploading these kind of videos

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

    Thank you for the tourial friend, greetings from Indonesia

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

    your videos are the best so far, thank you

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

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

    thank you very much, permission to save and learn

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

    Thank you this make things easer

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

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

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

    Best teacher, thank you your leason. 👋

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

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

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

    You have the best tutorials. Can you please do more with CSS Grid???

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

      Did you check this CSS Grid tutorial: ruclips.net/video/4fw6a2yLvXU/видео.html

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

      @@GreatStackDev I did. It was very good. Keep up the good work

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

    Love the video. I implemented it in my Laravel page and it works fine. It's just that when I go from one page to another, it resets to light mode by default. Do you know how to fix it?

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

      yes watch it 2nd part too, and also add same script in all pages: ruclips.net/video/2j_kBqpFK-g/видео.html

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

      @@GreatStackDev Thanks for the quick reply man. Keep up the good work

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

      Use an external js file and link it to all the pages.

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

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

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

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

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

    thanks, when i know about you, i hope you can teach me somethings like this, i learned it, one more time Thanks so much.

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

    This was very helpful, thanks!

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

    I really appreciate your tutorials. Is it possible to make the buttons and nav bar glow? If yes, how does one go about doing it? Thanks!

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

      Yes you can make it by using box-shadow shown in this video: ruclips.net/video/UlSWnzaCI38/видео.html

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

      @@GreatStackDev OMG this will totally work!!!! Thank you

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

    best explaination on the topic

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

    The best channel😍

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

    Interesting #DarkMode #Webdesign

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

    There is a much simpler way add this style to your body
    body *:not(img){
    filter: invert(1)
    }
    You can add anything to :not that you dont want to invert also you can do it with a class aswell ....