Build An Easy Light/Dark Mode Toggle With CSS & JavaScript

Подписаться 124 тыс.

Просмотров 26 тыс.

50% 1

🚨🚨🚨 COURSES - slayingthedrag... 🚨🚨🚨
Join the discord - / discord
Codepen for this - codepen.io/ram...
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/ico...

Опубликовано:

28 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 108

@slayingthedragon Год назад

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.

@avijitroyankan305 Год назад

i was surprised at that time 😆

@shreyanshrathore6782 Год назад

Loved the way, how you explained short circuiting....

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

Those extra 3 mins at the end are golden

@Zynix- Год назад

You are so good at explaining things, your tutorials are so underrated 🔥 your tutorials deserve attention..

@slayingthedragon Год назад

I appreciate that!

@DannyH77 11 месяцев назад

@@slayingthedragon when will JavaScript course be ready? i love the way you teach!!

@slayingthedragon 11 месяцев назад

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

@DannyH77 11 месяцев назад

@@slayingthedragon OK ,Thank you

@DannyH77 11 месяцев назад

@@slayingthedragon I'm still struggling with grid, so I'll just keep practicing with that, and css animation until you put out JavaScript course

@methodboss6719 Год назад

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

@Sonya_Makepeace Год назад

Your English is good, don't worry.

@rupiik Год назад

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.

@jimi2004 Год назад

I had never felt so comfortable learning with RU-vid 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 🇲🇽

@jeremiah869 Год назад

Literally the best web-dev content in the game, what an amazing channel

@Vaannnard Год назад

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!

@zancrow_gaming Год назад

Bro I had issues understanding the guard operators coz I just started javascript. But I understand almost everything I see here. Well explained💯

@valentino8195 Год назад

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

@TheChiaralyn Год назад

Thank you so much, your video are amazing! Hugs from Italy 😊

@ShawnRitch Год назад

You wouldn't happen to know any DeMarco's there in Italy, would you?

@mujtabakhan4521 Год назад

you are my favouritteeeeeeeeeeeeeeeeeeeeee

@andreirusen8410 Год назад

Really good video! Very explicit and informative!

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

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.

@abbdd-zg7zy Год назад

thanks from syria and wish you Continue 🌹❤️

@fexrihesenov8045 Год назад

Where are you ? Please come back ) We need more more new tricks, 3d and moreover which contain js projects

@mohamedibrahemsaad573 Год назад

please come back We miss your channel

@defichronicles Год назад

Amazing!

@andei9743 Год назад

Beautiful explanation

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

Very informative and helpful, thank you so much! Subscribed as well

@ericaimhigh Год назад

I'm here again. Your explanation is top notch

@Onik_the_computer_geek Год назад

Love ur content bro

@Amar-b9j4c 7 месяцев назад

bro ure the best

@nghialenguyenduy8386 Год назад

good job man 🎉🎉

@NYDEV0 Год назад

You deserve millons of subs

@slayingthedragon Год назад

Thank you 😊❤

@royalgreenchannel574 Год назад

please upload the videos on regular basis. at least weekly once . your videos are something special. make a videos on full stack development.

@vilassa Год назад

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|

@dreamcatchermarketing4783 Год назад

Thanks

@ifunanyablessing3411 Год назад

nice video, I love ur teaching style please can u make a complete css lesson

@methodboss6719 Год назад

Create a full course on CSS and JavaScript

@slayingthedragon Год назад

I'm working on a CSS course right now! And after I'll release a free JS course on RU-vid as a playlist :p

@itsmo_01 Год назад

Next time do a calculator with js pls !!

@shubhamshukla7778 Год назад

Bro please make video on Java script full

@nirajpathak99 Год назад

Ternary operators can be used to shorten the code.

@slayingthedragon Год назад

Did you watch the entire video ?

@nirajpathak99 Год назад

Yeah 👍 I know what you mean

@slayingthedragon Год назад

Much love ❤️

@nirajpathak99 Год назад

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

@tauromusic96 11 месяцев назад

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

@tauromusic96 11 месяцев назад

I used font awesome icon so they change on click

@HexFireGaming1 Год назад

Bro upload new video related to css

@thatoneshortkidjordy2144 Год назад

Dddamn, how you good at css and brawl 😔

@slayingthedragon Год назад

Haha this one is actually JavaScript but thank you ☺️❤️

@SaladHood Год назад

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.

@antoniotopic6196 Год назад

Post more tutorials about JS. You are teaching better than Ask Lixi (and she is better than others!)

@bilaltoor123 Год назад

Your are very helpful for me friend lovee from Pakistan ❤️❤️❤️

@TheWabbbit Год назад

To implement darkmode without JS, @media (prefers-color-scheme: dark) in CSS. do the work?

@wiz8058 Год назад

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.

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

Best Teacher. Please make more JavaScript Videos as well. You're enhancing my programmer thinking process.

@bowbowbow22 4 месяца назад

You're an exquisite instructor.

@molostv2786 Год назад

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

@slayingthedragon Год назад

That's so awesomeee! I hope you keep at it - I'm sure you'll go far !

@AkibAhmadGaming 4 месяца назад

@molostv2786 same here

@shahnoormughal6553 Год назад

You are doing very great. Please more vedios like thesee❤

@shahnoormughal6553 Год назад

Make a complete javascrit course plzz❤

@UniversaL_ Год назад

Can u pls created a video on javascript

@reromsp Год назад

Expecting more js videos

@malekgharyani2339 Год назад

u are too good broo keep going

@hamzaashraf1776 Год назад

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.

@raunak_saha Год назад

" We can do better"

@ronaldawudi-ackerman905 11 месяцев назад

Thanks

@yoanmitrev Год назад

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!

@slayingthedragon Год назад

Great suggestion thanks you ☺️ !

@parthshandilyaiitr Год назад

You need to start a course or something

@slayingthedragon Год назад

❤️❤️❤️

@mountacer4159 Год назад

You are amazing ❤ love the way you explaine 😊

@JulianStark 11 месяцев назад

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?

@slayingthedragon 11 месяцев назад

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

@JulianStark 11 месяцев назад

@@slayingthedragon thank you! so I guess the JS should be in the head with no defer in it

@jaydeepgill218 Год назад

Your flex, grid and other css videos are too great.... please also make some videos on JavaScript ...i am really finding it hard....

@slayingthedragon Год назад

I will, I'm just finishing up my CSS course and I'll come back with weekly content on RU-vid !

@avijitroyankan305 Год назад

💯💯

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

Truly excellent, when will your JS course come? I saw it on your website.

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

Some time during the summer

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

@@slayingthedragon the method you taught in this video was excellent I have never ever seen something like. I hope the method will be same.

@ZockaRocka Месяц назад

I really like your code 😊 However i think it would have been even better to use the returned value of the toggle method from the DOMTokenList for the if condition in the handler

@KeyStroke_IT Год назад

Love your work bro. Well paced and detailed videos. I'm watching from Nigeria. ✌🏾

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

The "floating there in nothingness" made me laugh more than it should have.

@Avarn388 Год назад

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.

@johndoe8091 4 месяца назад

Amazing videos dude, do you have a video on how to decouple scroll transitions from theme switching?

@amdjed_mijoukh Год назад

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

@samplechannel2312 Год назад

Yes... really great explanation...❤ We need entire real time project ( js or react) with same level of explanation

@Garvitjain-ru4ci Год назад

I am totally counting on you. Also expecting more content like this.

@sayanghosh6996 Год назад

Good content as always, also liked the playfullness on this one!

@slayingthedragon Год назад

Thank you ❤️❤️

@srshah Год назад

Hey buddy do you use these concepts in production apps as well?? Or do you use any UI libraries??

@slayingthedragon Год назад

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.

@srshah Год назад

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

@slayingthedragon Год назад

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

@kilimanjaro8075 Год назад

Pls java script tutorial series 🥲🤌

@alqudesalislami Год назад

you are really professional, could I ask how many year do I need to become like you, I am still beginner?

@slayingthedragon Год назад

Heyy, everyones journey is going to be different, you just need to do your best and not give up ❤

@CornSensei Год назад

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 😄

@Gomnojedac 8 месяцев назад

What is this theme in vs code? Thanks

@slayingthedragon 8 месяцев назад

one dark pro

@sylojos Год назад

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"); }

@slayingthedragon Год назад

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.

@sylojos Год назад

@@slayingthedragon Thank you! Love your videos. I hope you consider to upload framework tutorial in the future.