HomeОбразованиеRelated VideosMore From: Online Tutorials

Day / Night Mode Switch Toggle Using Html CSS and Javascript - How To Create a Toggle Switch

345 ratings | 11859 views
Please LIKE our Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/ Track: Skylike - Dawn Link: https://youtu.be/Jg9nDEtqWV0
Html code for embedding videos on your blog
Text Comments (31)
Md Tahazzot (1 month ago)
But it will be removed when the page will reloaded again!
Md Tahazzot (11 days ago)
@Андрей Марсин Not now. If I had I won't seen this video :)
Exactly! Do you have some ideas?
Nicolas Silva (1 month ago)
holy shit, this is so simple, toggle a class, how was i so stupid i couldn't found a proper way, so many jquery lines, and it was this simple, thanks a lot
Portal Wibu (1 month ago)
Love this tutorial so much. Can you apply this with cookies?
Naylek (1 month ago)
Have you found a way to make it work in multi-page format?
JMR (3 months ago)
is there a text of this?
Vercusgames (3 months ago)
Make sure the text is spaced for the html portion. Or the code won't load properly.
Simon Hren (3 months ago)
while this is nice example, it is not really useful, at least not if you want to change complete theme of web page. I am trying to toggle between two .css files, dark.css and light.css.
Simon Hren You Can Do that easily by making 2 copies of index.html and making a portway between Them
Trevor Capozza (4 months ago)
Thanks for sharing! Would you mind showing how to add localStorage to this to save the dark mode setting?
onee (7 months ago)
jQuery is not JavaScript.
mang kanor (8 months ago)
music is loud and annoying
Bambino (10 months ago)
Can you add some more obnoxious music in new videos, i feel like killing myself and the cancerous "music" you add to your videos is really motivating me to take that last step.
Danny Wijnsema (7 months ago)
You can mute a video you know. Also that was a very disrespectful comment of you.
Steve Stublaski (10 months ago)
OK this is Pretty Cool have been looking for something like this for a website I am building. Only one question although this code works awesome. Is there a way to take and add some code in to where if someone turns on night mode on one page that it takes and stays in the night mode when they go from one page to the other in the site? If this is doable that would be awesome . Hope to take and hear back from someone on how to add this feature . And if you can also take and leave the steps for adding the new piece of code thanks in advance
thibault debrycke (7 months ago)
you could work with cookies
SHARAT KUMAR (1 year ago)
Hello Sir Nice Video, I want to learn this so can I have your project file what I have seen in this, here is my email I'd [email protected]
Shared on my CodePen here: https://codepen.io/Viggofyr/pen/MXYEwr?editors=1100
Brilliant. Thanks for sharing
DarkMan (1 year ago)
::::::::::::::::HTML::::::::::::: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Dark and Light</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <section> <h1>What is Lorem ipsum ?</h1> <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p> <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p> <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."</p> </section> <ul> <li> <span>Dark</span> <span>Light</span> </li> </ul> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('ul').click(function(){ $('ul').toggleClass('active') $('section').toggleClass('dark') }) }) </script> </body> </html> :::::::::::::::CSS:::::::::::::::: body{ margin:0; padding:0; font-family:sans-serif; } section{ position:absolute; top:0; left:0; width:100%; height:100vh; box-sizing:border-box; padding:100px; transition:0.5s; } section.dark{ background:#262626; color:#fff; } ul{ position:absolute; top:20px; right:20px; margin:0; padding:0; width:100px; height:30px; z-index:1; border:1px solid #000; border-radius:4px; cursor:pointer; overflow:hidden; } ul.active{ border-color:#fff; } ul li{ list-style:none; width:100%; height:60px; text-align:center; text-transform:uppercase; transition:0.5s; } ul.active li{ transform:translateY(-30px); } ul li span{ display:block; width:100%; height:30px; line-height:30px; color:#262626; background:#fff; } ul li span:nth-child(1){ background:#262626; color:#fff; }
Skisnowgames (9 months ago)
He used SublimeText 3
noor mohammad siddiqui (11 months ago)
DarkMan which editor is used in this video and what do you use ?
noor mohammad siddiqui (11 months ago)
DarkMan Nice work bro
The Kingfisher (1 year ago)
Awesome Creation....!!!! Please Brother If you have time for us Please Create a responsive Navigation Bar With a Logo in the center of the navigation bar...!!!
Yudhi Prasetyo (1 year ago)
make a image slider with control please
Yudhi Prasetyo (1 year ago)
can you tell me where i can get to learn how to make a image slider with control
çağatay emre ünal (1 year ago)
Yudhi Prasetyo man we follow similar youtube channels 😀 both are the best
Technical Tips (1 year ago)
Great work
Muhammed Fathi (1 year ago)
u t amazing
Gurmeet Dhillon (1 year ago)
Always first comment This is awesoooooooooooome Thanks for your all knowledgeble videos

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.