Build An Easy Light/Dark Mode Toggle With CSS & JavaScript
ฝัง
- เผยแพร่เมื่อ 15 เม.ย. 2023
- 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
Codepen for this - codepen.io/ramzibach-the-styl...
To add dark mode to our website, we first need some elements in our HTML.
All I have is button with the class of theme-toggle and an SVG icon inside it.
Under the button, I also have an h1 that displays dark/light mode and under the h1, I have a paragraph that displays filler text.
In my CSS, I don’t have much, I just have what’s needed for the layout to be in the middle of the page....
Cursor icon from icons8.com/icon/14102/cursor - วิทยาศาสตร์และเทคโนโลยี
Just to let everyone know, at 13:49 I define an arrow function but I forget to assign it in a variable. Code still works though but, you should probably add the const before handleToggleTheme. I'm a silly goose.
i was surprised at that time 😆
Loved the way, how you explained short circuiting....
Those extra 3 mins at the end are golden
I hope you produce more content mate. Your videos are so short and concise and I learn a lot from them. Very easy to understand and follow along.
Best Teacher. Please make more JavaScript Videos as well. You're enhancing my programmer thinking process.
You are so good at explaining things, your tutorials are so underrated 🔥
your tutorials deserve attention..
I appreciate that!
@@slayingthedragon when will JavaScript course be ready? i love the way you teach!!
@@DannyH77 Thank you, I just released the CSS course and courses take time to complete, so we're many months away from the JS course unfortunately, I'm doing my best though and I appreciate the interest 🙂
@@slayingthedragon OK ,Thank you
@@slayingthedragon I'm still struggling with grid, so I'll just keep practicing with that, and css animation until you put out JavaScript course
Who wants a full course from this guy
The way he teaches it's so understandable
And excuse me for my English because I am not good at my English
Your English is good, don't worry.
You are AMAZING at explaining things! Showing examples, how one element is connected to another and giving most practical information as simply as it need to be.
Young (14y/o) developer and i have to say, your videos are one of the most helpful ways i get new information on coding! much love from Kosovo
That's so awesomeee! I hope you keep at it - I'm sure you'll go far !
@molostv2786 same here
Amazing videos! I've binge watched through your channel today and I'm happy I found it. It explains css units, flexbox, grids, positioning and very useful general knowledge really well!
Excellent job. I really loved how you explained short circuiting. It’s such a powerful concept of JavaScript and when leveraged here, it makes a worlds difference.
Your videos are the best on youtube about basic frontend. I need to understand the concept of :before and :after with the content:"" seems like a challenging video.
Awesome and easy to understand video! Thank you very much. Cant wait to implement this to my own website. Keep up the great work. Greetings from switzerland
I had never felt so comfortable learning with TH-cam videos until I came across your channel, I hope you can upload more content like this, because you really make very good content, I hope you can make a video about sidenav and how to align it correctly with Main in the center and the articles on the right side. Greetings from Mexico 🇲🇽
Literally the best web-dev content in the game, what an amazing channel
awesome! easy to follow, and allowed me to easily customize more to my wants. will be trying this method with another theme idea other than colors.
Really good video! Very explicit and informative!
Love your work bro. Well paced and detailed videos. I'm watching from Nigeria. ✌🏾
Very informative and helpful, thank you so much! Subscribed as well
Good content as always, also liked the playfullness on this one!
Thank you ❤️❤️
I am totally counting on you.
Also expecting more content like this.
you are my favouritteeeeeeeeeeeeeeeeeeeeee
Yes... really great explanation...❤ We need entire real time project ( js or react) with same level of explanation
Thank you so much, your video are amazing! Hugs from Italy 😊
You wouldn't happen to know any DeMarco's there in Italy, would you?
Bro I had issues understanding the guard operators coz I just started javascript. But I understand almost everything I see here. Well explained💯
You are amazing ❤ love the way you explaine 😊
Love ur content bro
You're an exquisite instructor.
u are too good broo keep going
Beautiful explanation
I'm here again. Your explanation is top notch
Post more tutorials about JS.
You are teaching better than Ask Lixi (and she is better than others!)
good job man 🎉🎉
You are doing very great. Please more vedios like thesee❤
The "floating there in nothingness" made me laugh more than it should have.
Amazing!
thanks from syria and wish you Continue 🌹❤️
bro ure the best
Amazing videos dude, do you have a video on how to decouple scroll transitions from theme switching?
Hey man, I have watched all of your videos and I have to say nobody has ever taught me that much about coding. Maybe in the future you can make a video about drop-down menus and how to make them. I'm sure this will be of great use. Thanks!
Great suggestion thanks you ☺️ !
nice video, I love ur teaching style please can u make a complete css lesson
Amazing Video! Very clear and works great! 💯
Just wondering if you knew how to make it remember your icons for dark/light modes on refresh? For example I have a moon for dark mode and a sun for light. Thanks in advance 😄
can you talk about images and background properties and when to use them.ty and gj your content is very good and not too long
Where are you ? Please come back ) We need more more new tricks, 3d and moreover which contain js projects
Your are very helpful for me friend lovee from Pakistan ❤️❤️❤️
please come back We miss your channel
You deserve millons of subs
Thank you 😊❤
Thanks
Expecting more js videos
Your flex, grid and other css videos are too great.... please also make some videos on JavaScript ...i am really finding it hard....
I will, I'm just finishing up my CSS course and I'll come back with weekly content on TH-cam !
please upload the videos on regular basis. at least weekly once . your videos are something special.
make a videos on full stack development.
To implement darkmode without JS,
@media (prefers-color-scheme: dark) in CSS. do the work?
Truly excellent, when will your JS course come? I saw it on your website.
Some time during the summer
@@slayingthedragon the method you taught in this video was excellent I have never ever seen something like. I hope the method will be same.
please am new to react and am having issues. Can you do a video on react? Touching on basic and one videos to create a single page website.
Make a complete javascrit course plzz❤
Can u pls created a video on javascript
Hey man, are you still alive? I just discovered your channel, and you rock. Give us more tutorials, for sure with the correct affiliate programs you can make some good money, and it will be useful for us. Keep rocking, cheers|
💯💯
Create a full course on CSS and JavaScript
I'm working on a CSS course right now! And after I'll release a free JS course on TH-cam as a playlist :p
Next time do a calculator with js pls !!
you are really professional, could I ask how many year do I need to become like you, I am still beginner?
Heyy, everyones journey is going to be different, you just need to do your best and not give up ❤
Thanks for the great video! One question but I might be wrong: I think you put the js to the footer or end of body. Let’s imagine this is a big site with lots of content in the body. So if I load a new page and I’m already in dark mode I guess the colors will only switch to dark after the page has loaded and the js has been started. There will be some kind of flash from light to dark. Right? Would it be better, to put the code to the head?
Hey, I found this stackoverflow with a similar question to yours, the answer is pretty good! stackoverflow.com/questions/71799083/white-flash-on-dark-mode-on-refreshing-page
@@slayingthedragon thank you! so I guess the JS should be in the head with no defer in it
Hey good video! have a question, when i refresh the page still in dark mode it didn't change in sun but remain moon so i have to double click on it to return in light mode, how can i fix that? Thanks
I used font awesome icon so they change on click
Bro please make video on Java script full
Hey buddy do you use these concepts in production apps as well?? Or do you use any UI libraries??
I use React and NextJS for anything production. However if I were tasked to do this in vanilla JS for production, I would do it exactly like I did it on the video.
@@slayingthedragon Seeing from your portfolio video I'm guessing you use tailwind with Next JS🤔, I use the same.
Can you advise me on usage of libraries like chakra in NextJS apps or should I stick with css/tailwind.
@@srshah I can't speak for Chakra I've never used it. For styling I either use TailwindCSS or CSS Modules alongside NextJS.
TailwindCSS is the only styling library I used, otherwise I really like normal CSS
Ternary operators can be used to shorten the code.
Did you watch the entire video ?
Yeah 👍 I know what you mean
Much love ❤️
@@slayingthedragon Hey I'm working on a personal project. Need to use REM as breakpoints. But it has issues so JS implementation will work I guess.
What is this theme in vs code? Thanks
one dark pro
Hello I have a question regarding the making the code more readable, where do I place the function?
Place it under handlers comment or place it at the very top of the code or at the very bottom of the code?
function abc() {
alert("Hi");
}
Placing it under the handler comment makes it the most readable. You don't want your functions at the top, it makes more sense to have your selectors at the top.
I didn't invent this pattern, JavaScript frameworks like React use a very similar structure and the way I structured it in the video is most recognizable for other developers.
@@slayingthedragon Thank you! Love your videos. I hope you consider to upload framework tutorial in the future.
Bro upload new video related to css
Dddamn, how you good at css and brawl 😔
Haha this one is actually JavaScript but thank you ☺️❤️
You need to start a course or something
❤️❤️❤️
Pls java script tutorial series 🥲🤌
" We can do better"
Thanks