React Dark Mode Toggle/Theme - Complete Guide

Learn how to easily add a dark mode and theme toggle to your react project using CSS in this tutorial for beginners. Also learn about CSS variables, custom HTML attributes, local storage, and reading system preferences.
Discord - / discord
Subscribe - / @code_complete
☕ Donate to support the channel! - www.buymeacoffee.com/CodeComp...
-- 🌟 Useful Tools and Software 🌟 --
🌐 10% off domains at Domain.com (use code DOMAIN10) - domain.mno8.net/CodeComplete
☁️ FREE $100 for server hosting on Linode - linode.gvw92c.net/CodeComplete
📚 30% off annual Skillshare membership (use code annual30aff) - skillshare.eqcm.net/CodeComplete
-- 🔗 Links 🔗 --
💻 Code - github.com/CodeCompleteYT/rea...
Music credits:
Chill Wave Kevin MacLeod (incompetech.com)
Licensed under Creative Commons: By Attribution 3.0 License
creativecommons.org/licenses/b...
DISCLAIMER: Some of the links in the description are affiliate links. The channel will receive a small commission from any sales from these links, but there is no extra charge to you. Thanks for supporting the channel so I can keep making these free tutorials!
📖 Chapters:
00:00 Introduction
00:27 Setup
02:07 Creating The Page
02:22 CSS Variables
03:59 Custom HTML Attributes
05:14 Creating The Toggle
10:16 Local Storage
11:09 System Preferences

[@Selconag]

This video is overwhelmingly good. Starting with a meme moment is the best thing ever.

[@Code_Complete]

Thanks haha, glad you liked it!

[@mercy4120]

great video! just the approach i had been searching about how to implement

[@marekjjjj]

finally someone who shows the right way, thanks so much, saved my day

[@SWebDev7]

So very compacted precious informations i love it thanks you very much

[@Code_Complete]

Glad it was helpful!

[@pixel_designs]

Thank you so much man!

[@2gbeh]

Magic ✨

[@imommuhammadsayfillayev1027]

Thank you

[@ziw3033]

Great video :) I tried your method and noticed that it works for a single component! What if I have a Navbar that sits on the top of every page? Thank you in advance😃

[@ziw3033]

ah never mind I figured it out :)) as long as the individual divs on separate components also have useLocalStorage and data-theme in their divs, they work!

[@joshuadk1394]

@@ziw3033 How did you do this cause i got my dark mode in my navbar but it doesnt change any of my other pages only the navbar

[@user-wp6vw6qv5q]

What if we want to apply dark mode to only a container on current page instead of whole app?

[@paski702]

Add "data-theme" to your container like:

[@joshuadk1394]

Im having Trouble to able the darkmode to my whole component i currently have the darkmode component in the navbar and then i import the navbar into the app.js file but it doesnt then change the other pages

[@ZainM.]

isDark ? "dark" : "light"
Where basically "light" doesn't exist so it goes back to default right ?

[@Code_Complete]

Yup that’s right, you could leave it as “dark” : “” as well

[@ZainM.]

Your Video's are helping me clear concepts! Thankyou so much @@Code_Complete ❤❤

[@GameStrings]

😅

[@MuhammadAbdullah-fr1fu]

bro your teaching style is not good. Plz talk slow so we know what you are saying

[@S-Lomar]

Well done 🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰🥰