How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS
HTML-код
- Опубликовано: 7 сен 2024
- Learn How To Make Dark Mode On Website | Dark Mode, Dark Theme Website Design Using HTML CSS and JavaScript Step by Step
❤️ SUBSCRIBE: goo.gl/tTFmPb
Watch This video to make website design:
👉 • How To Make A Website ...
Download Icons:
drive.google.c...
In this video we will create light mode and dark mode switching option on website using HTML CSS and JavaScript. We will use CSS variables to change theme color from one place. after that we will add JavaScript that will change the theme color by clicking on icon, it will also change the icon from moon icon to the sun icon. after watching this video you can convert any website into dark mode or night mode or dark theme website.
Part 2: • How To Make Dark Mode ...
----------------------------------------------------------
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
HTML and CSS For Beginners
► • Complete HTML & CSS Co...
Login and Register with Database connectivity:
► • How To Make Login & Re...
Make Contact form using HTML CSS PHP
► • Create Working Contact...
Make Form With Password hide and display toggle:
► • How To Make Login Form...
Make login and registration form with Transition:
► • How To Make Login & Re...
Make a full website using HTML and CSS
► • How To Make Website Us...
-------------------------------------
Best hosting up to 60% off (coupon- EASYTUTORIALS)
👉 easytutorialsp...
Affordable hosting up to 91% (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
image credit:
pexels.com/
www.pexels.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
This video makes the light and dark mode toggle so much easier. Thank you!
Great to hear!
Thank you so much. I'm teaching my students with the help of your videos. We are writing your projects in class.
Wonderful!
What kind of teacher are you?😂😂😂
@@webwizard4219 😂
@@webwizard4219 😂😂
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
I actually like this type of explanatory videos, rather than the trendy fast forwarded ones. Good job sir. Have a nice day ahead.
Glad you liked it!
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!
THIS IS AMAZING, I'M SO HAPPY RIGHT NOW 😍😅
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.
I watched it today, My all doubts about dark mode are clear, your explanation are awesome 👏❤️
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
I am wondering why he is not using inspect element 😂😁
Helpful video 🤘
bruh i feel sad why you should not approach 1 M subscriber love from Pakistan
I had to create toggle between dark and light mode this week and this video made it real easy to implement. Thanks a lot !!
So easy but so much helpful,thanks a lot man!
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
thanks for everything, greetings from La Paz Bolivia ... South America .... Go ahead and thank you for sharing all your knowledge. God bless you.
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
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.
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.
You are not wrong
It’s better one get his or herself familiar with putting the script in the head other than in the body
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
You have improved your channel a lot, you were very helpful, thank you !!
Glad to hear that!
Hey I really liked the video! ❤☀️💚🇮🇳
Thank you Diyako
Tutorial is so clear and with your sound it is easier to understand...
Thank you
Thank you Niroo. glad you like this dark mode website video.
Please make multi page website with this, that’d be amazing!
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.
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
Thank you so much❤ Now I have completed my project. ❤❤❤❤
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. 💓
This is the easiest and the best explanation. You are a champion.
this channel deservrd a million views and subcriber its very useful and amazing tutorial easy to learn
Honestly respect for you thanks bro you solve my problem ✔️✔️✔️👍👍👍👍👍👍
Welcome 👍
Good, and clear video! Thanks!
I am writing a comment to increase the ranking!
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
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.
that click event added a new class name "dark-theme" in the and this dark theme class contains new color codes for the website
@@GreatStackDev Thank you perfectly got it!
Thank you friend! You explained this soo good. Now working on my website project for school. Thanks!
This is the best RUclips channel to learn website development.
Thank you, glad you like my channel
@@GreatStackDev your videos helped me a lot. God bless 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
@@GreatStackDev much needed video 👍
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
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👍
Thanks a lot my dear teacher ...
Ur student from yemen💚💚💚
Thanks, Please check it part 2 also, to same dark mode in browser: ruclips.net/video/2j_kBqpFK-g/видео.html
Thank you, man!!!
You are a life savior
Really appreciate your content
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
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
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
SIR YOU ARE GREAT YOUR LEARNING STYLE WAS SOOOOOOOOOOOOOOO EASY
Dood, this is impressively simple. I'm going to see if this works with my client's wix site right now. Thank you!
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.
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.
Just Amazing..... Thank you Bro.
Glad you liked it. Thanks for your comment. 😊
Your a beast bro, not just changing the background color and text color but the buttons as well
I want to make a website which will store data of user by just login form
Means i will add users name and password manually, i will upload thier data, and they will able to download it
Can you make a video on it ??
If you want more details , i will mail you, give me your email🙂
Video is there
@@aniketashokbhise link plz
@@atharva4093 okk
@@atharva4093ruclips.net/video/NXAHkqiIepc/видео.html
Dark theme I use. But if i refresh the page, it comes back to the previous theme. What is the solution?
theme didn't changed ! Any problem here ?
var icon = document.getElementById("icon");
icon.onclick = function(){
document.body.classList.toogle("dark-theme");
if(document.body.classList.contains("dark-theme")){
icon.src="img/sun.png";
}
else{
icon.src="img/moon.png";
}
}
What about when the user refreshes or navigates to another page? Won't it switch back to light mode?
Use localStorage
Hi Reece, 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
@@GreatStackDev Thank you so much!
you just save a brother thank so much
Happy to help!
I wrote everything you wrote in the script, but it doesn't color like you and I can't :(
var icon = document.getElementById("icon");
icon.onclick = funcion(){
document.body.classList.toggle("dark-theme");
sir my moon icon is not coming as i m not able to downkoad the image...when i click on the image u provided it shows copy file name, on pasting it in img src, the image does not show....what do i do? plz help, i m a beginner.
Just checking can you still make webpages without tutorials?
Awesome u r helping billions of programmers
glad i could help
thank you , your solution is so helpful
Glad it helped
this is what I have been looking for...
thank you so much sir.
You are a legend and your tutorials are amazing❤❤
Thankyou so so much man. Great tutorial keet it up..
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
have you found out the answer?
Thanks GreatStack for a Great Video!
Glad you enjoyed it Amit! Thank you 😊
bro please you give us (bootstrap 5 & javascript) basic to advance tutorial........??
your tutorial on of the best tutorial
Add a function on button to flip collours of every element you want color changed.
It´s fantastic and your explanations are also really good! :)
Thank you for clarifying my doubt...................
I l oved how clean your website and code is. thanks for the nice explanation. You got a new sub
Bro thank you for explaining things so easily. I am glad i found your channel
Hi. I'm trying to implement dark mode but when I click the button it would only work for the current page, then when i go to a different page it would go back to the default light mode unless I click on the dark button again. How do I make it apply to the whole website? Thanks!
Awesome video, thanks a lot! You turned this feature into something really easy to do when I was struggling trying to make it!
Superb Ninja Simple technic used dark-them. Thank you so much.
Glad you liked it!
Very helpful for my competition ♥️🤘 Thanks.
Very very helpful
Thanks a bunch
Plz plz make more of these amazing short videoes on java script
God bless ya❤
This was such a great video. It made it a hundred times easier
Bro is casually flexing on the smooth css animation by hovering over the lady in the start 😭😭
hi, I wanted to use an icon vector instead of an image, how do I do this?
superb sir thank you so much greatfull....plz keep making such videos
A lot of thank you from me sir...good job 😎 U have a great video and i love it...thanks 😄
this is the best video tutorial that i have ever seen, good job!
glad you like this dark mode website tutorial
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 ....
bro when i refresh the page it turns light mode and when moving to another linked page the mode is different what to do to keep same mode through all pages when clicked....?
That's awesome for bignrs to learn from... Inspire
It works.
thank you sir for such amazing videos.
The video is very nice. The concept is cleared. Thanks
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!
Yes you can make it by using box-shadow shown in this video: ruclips.net/video/UlSWnzaCI38/видео.html
@@GreatStackDev OMG this will totally work!!!! Thank you
How could you animate the change from light to dark and back again? I can't get '--transition-delay' to work!
Bro thanks for this video ❤ , it's so easy to understand, Thankyou
You're the best.. I SWEAR 🙌😍❤❤❤
It is so amazing I like it so much
and you are so kind
Glad you think so
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.
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
Great content Please keep uploading these kind of videos
Thanks that one is really working.
Thank you so much for this tutorial.
You are so welcome! Glad you liked this light mode to dark mode website tutorial
Sir please make complete website as you did with college website some days before
Already Bht sare hai complete website design tutorial, Please check this playlist: ruclips.net/p/PLjwm_8O3suyNtV-ca8HkE_GW92CWJ0hIF
And Sure I will be making more such complete website tutorials
Thank you this make things easer
Interesting #DarkMode #Webdesign
Thank you my bro for sharing this amazing website i really appreciate it 👍👍
bro you videos are very useful and educative
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
very good but until there i have tho learn a lot
your videos are the best so far, thank you
u got a subscriber for this.. Good Day!😃
After following the process when I refreshed my website it's reflect back to the previous mode how do I fix this please
This was a great explanation, thank you brother
Thank you very much, this helped me a lot.
Thank you so much brother😀
Thanks to you, Please check it's part 2 also.
thanks, when i know about you, i hope you can teach me somethings like this, i learned it, one more time Thanks so much.
You are welcome!
I'm using svg for the moon and sun icon. How to replace svg of sun in place of img src line?
place your SVG code in a text file and rename as sun.svg and moon.svg
then you can add it like a regular image with img tag
great video, very useful, thanks for the knowledge bro 🔥
Thank you for the tourial friend, greetings from Indonesia