How to make a website light/dark toggle with CSS & JS

A look at how to create a dark mode toggle switch using JS, which saves the person's preference in localStorage for the next time they visit.

---

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

[deathtoby]

Hi Kevin. I think you may have made a mistake here. localStorage will always convert your value to string. So when you set it as null, it will convert it to "null" instead and that will always return true. Although you did not check on it but it may not be the best practice here. You would need to use .removeItem instead if you want it to be null or undefined

[schism]

I've been a professional frontend developer for years and I still learn new tricks from you in every single one of your videos! Thank you for your work!

[chrisicotec]

this channel has made me fall in love with CSS again... not so much the projects on the channel but for the use of vs code, i shunned it for years heavily favouring notepad++ s my tool of choice, now vs code is my first choice

[anastasiyaboiko]

Thank you, I finally figured out how to do my homework

[MARIUTSKI]

Didn't know that simple thing about css variables: you can change their values :'v. As always, you opened my eyes, Kevin, thanks a lot!

[pankam]

@Kevin Powell is the KING explainer for CSS in YouTube..!!!

[JohnWick-idpk]

Thank you for the tutorial! I have used the code to do dark mode and modified it to make a switch which does visual JS functions

[ConorBailey]

Awesome. I love how you explain clearly what the code is doing. Thanks Kevin!

[JFishh_]

Hi, not sure if you'll see this but regardless, I wanted to drop a comment to say thanks for this video. I'm currently at the end stage of a university project in which I'm building a web-app and I really wanted to include dark mode as a feature to put my own spin on things. I couldn't figure out how to do it and then I found this video of yours which has been an awesome help, so I really appreciate it. Very happy to be able to have a working dark mode now that stays consistent across pages.

[nipunlakshank]

Youtube algorithm now scans my brain to see what's I'm thinking. I just had a thought of implementing a dark mode toggle and before even I search any kind of thing about that this came in the feed. Bruh this is too scary now!

[Nikhil-krrx]

you're YOU ARE LEGEND sir
i was struggling with this for a week now.
But thanks to you, now i can continue my project further.
THANK YOU!

[busyrand]

I need this. Thanks a million times! The local storage part is great.

[LeoStephanou]

I've been trying to get this working across other pages, and finally realised I just needed to put the script before the closing body tag....which is clear in this video :/ I did have it at the bottom for the first page, but didn't realise I have my script in the head section for the other pages...just fyi :D

[siriusgd]

That is wonderful Kevin. I've been meaning to create a process for selecting different themes for my website and I think this will help immensely with the coding.

[saschab.]

Thank you so much! Maybe you can make a playlist one day: "Useful scripts to avoid extra WordPress plugins." Thanks for saving me from yet another plugin...

[hectorserrano]

Great Video, as always. You should consider posting the CSS code as well, I wanted to take a look to see where the classes where getting added and removed when the JS fired. Love your content Kevin!

[Jarrod]

Using :root custom properties with the new prefers-color-scheme media query overrides makes it a cakewalk to implement robust CSS without any JS, which is absolutely crazy

[rogerluiz]

Amazing video! I'm from Brazil and i watch your videos to learning programming!

[aaranragu]

Thank you sooo sooo much for this tutorial. I had a school project on making a website and I'm so grateful I'm able to implement this feature with the help of amazing such as this one

[muhammadfaiz]

Your teaching technique is awesome sir 👌