How To Make Website DARK MODE | Dark Theme Website Design Using HTML, CSS & JS
ฝัง
- เผยแพร่เมื่อ 6 ต.ค. 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:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
![⚔️จำกัดเวลา⚔️ [พากย์ไทย] ซอร์ดอาร์ตออนไลน์ ซีซั่น 1 - ฉบับมัดรวมทุกตอน](http://i.ytimg.com/vi/ohkfBVDXLSA/mqdefault.jpg)
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.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 was the ONLY video that did not make it complicated, thank you so so much for the clear and concise tutorial!
I am really glad to hear that. Thank you! 😊
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 watched it today, My all doubts about dark mode are clear, your explanation are awesome 👏❤️
THIS IS AMAZING, I'M SO HAPPY RIGHT NOW 😍😅
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
I see how it is TH-cam. You show me this ad everyday and I ignore it, but now you're actually recommending me this video.
I had to create toggle between dark and light mode this week and this video made it real easy to implement. Thanks a lot !!
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!
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
Thank you so much❤ Now I have completed my project. ❤❤❤❤
I am wondering why he is not using inspect element 😂😁
Helpful video 🤘
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
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.
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.
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
@@atharva4093th-cam.com/video/NXAHkqiIepc/w-d-xo.html
this is what I have been looking for...
thank you so much sir.
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
bruh i feel sad why you should not approach 1 M subscriber love from Pakistan
This is the easiest and the best explanation. You are a champion.
Please make multi page website with this, that’d be amazing!
Honestly respect for you thanks bro you solve my problem ✔️✔️✔️👍👍👍👍👍👍
Welcome 👍
SIR YOU ARE GREAT YOUR LEARNING STYLE WAS SOOOOOOOOOOOOOOO EASY
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: th-cam.com/video/oYRda7UtuhA/w-d-xo.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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
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. 💓
Thank you friend! You explained this soo good. Now working on my website project for school. Thanks!
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.
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?
Awesome u r helping billions of programmers
glad i could help
bro please you give us (bootstrap 5 & javascript) basic to advance tutorial........??
your tutorial on of the best tutorial
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
I'm completely understand positions concept ❤🎉
Thankyou so so much man. Great tutorial keet it up..
Your a beast bro, not just changing the background color and text color but the buttons as well
You are a legend and your tutorials are amazing❤❤
This is the best TH-cam 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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
@@GreatStackDev much needed video 👍
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: th-cam.com/video/UlSWnzaCI38/w-d-xo.html
@@GreatStackDev OMG this will totally work!!!! Thank you
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👍
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
Thanks a lot my dear teacher ...
Ur student from yemen💚💚💚
Thanks, Please check it part 2 also, to same dark mode in browser: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
@@GreatStackDev Thank you so much!
Bro thank you for explaining things so easily. I am glad i found your channel
Dark theme I use. But if i refresh the page, it comes back to the previous theme. What is the solution?
Hi your videos are all amazing.
I just have one question does it apply to all pages or only on the home page.
hi
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
this channel deservrd a million views and subcriber its very useful and amazing tutorial easy to learn
Add a function on button to flip collours of every element you want color changed.
I l oved how clean your website and code is. thanks for the nice explanation. You got a new sub
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
Just Amazing..... Thank you Bro.
Glad you liked it. Thanks for your comment. 😊
Superb Ninja Simple technic used dark-them. Thank you so much.
Glad you liked it!
It´s fantastic and your explanations are also really good! :)
thank you , your solution is so helpful
Glad it helped
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?
yes watch it 2nd part too, and also add same script in all pages: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
@@GreatStackDev Thanks for the quick reply man. Keep up the good work
Use an external js file and link it to all the pages.
Thank you for clarifying my doubt...................
Such easy explanation.. Loved it. Thankyou ❤️
Glad you liked it
Awesome video, thanks a lot! You turned this feature into something really easy to do when I was struggling trying to make it!
It works.
thank you sir for such amazing videos.
Very very helpful
Thanks a bunch
Plz plz make more of these amazing short videoes on java script
God bless ya❤
Very helpful for my competition ♥️🤘 Thanks.
this is the best video tutorial that i have ever seen, good job!
glad you like this dark mode website tutorial
Bro thanks for this video ❤ , it's so easy to understand, Thankyou
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: th-cam.com/play/PLjwm_8O3suyNtV-ca8HkE_GW92CWJ0hIF.html
And Sure I will be making more such complete website tutorials
Your tutorials saved me slots boss
Thanks Boss
hi, I wanted to use an icon vector instead of an image, how do I do this?
This was a great explanation, thank you brother
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: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
Thank you for this tutorial. How would you do to stay in dark/light mode even when you change the page ?
it is made in the send part of this tutorial: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
you just save a brother thank so much
Happy to help!
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 😄
Thank you very much, this helped me a lot.
This was such a great video. It made it a hundred times easier
Can we keep the relevant theme when refreshing also?
we can make it using localStorage JavaScript. I will make tutorial for the same very soon. Thanks for the comment
@@GreatStackDev Ok thanks
Looking to see a tutorial about that 😀
@@GreatStackDev In the waiting too :3
@Easy Tutorials can't wait to watch your next video about this dark mode theme Sir. :)
Please watch this video to save the dark theme on browser to keep dark theme active on page reload: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
your videos are the best so far, thank you
Your Videios are amazing.
Thankyou So much
Thank you so much brother😀
Thanks to you, Please check it's part 2 also.
You're the best.. I SWEAR 🙌😍❤❤❤
Thanks Sir Yours videos are veey Knowledge able
The video is very nice. The concept is cleared. Thanks
That's awesome for bignrs to learn from... Inspire
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?
This worked for me thank you so much ❤️
Glad it helped!
It is so amazing I like it so much
and you are so kind
Glad you think so
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!
hi, can you make the tutorial, related to this page on how to make it responsive for mobile devices?
This video concept was just to make dark mode website design, To learn responsive website design you can check this video: th-cam.com/video/lBfshkPlMW8/w-d-xo.html
Thank you my bro for sharing this amazing website i really appreciate it 👍👍
Thank You , Its very help full .
Glad it helped, Please check it's 2nd part also: th-cam.com/video/2j_kBqpFK-g/w-d-xo.html
thank you very much, permission to save and learn
This did it! Thank you so much.
Thanks GreatStack for a Great Video!
Glad you enjoyed it Amit! Thank you 😊
Thank you this make things easer
WOW this was short and easy thank you!
Thank you for the tourial friend, greetings from Indonesia
Thank you so much for this tutorial.
You are so welcome! Glad you liked this light mode to dark mode website tutorial