Build a dark mode light mode in reactjs with context api
Вставка
- Опубліковано 12 вер 2024
- In this tutorial, we will guide you on how to build a dark mode and light mode feature in ReactJS using the Context API. This approach involves creating a custom hook that simplifies the process of managing and toggling themes across your application. We’ll start by setting up a new React project with Tailwind CSS for styling, which comes with built-in dark mode classes. The tutorial walks through the creation of a ThemeProvider to manage the theme state, along with functional components like a ThemeButton and a Card. The useContext and useEffect hooks are utilized to ensure that the theme toggles correctly, based on user interaction. This method is a clean, scalable way to handle themes, especially useful for small to mid-size projects. Understanding how to leverage the Context API and custom hooks in React will not only streamline your development process but also improve code maintainability. Whether you are a beginner or an experienced developer, this guide will provide you with the essential skills to implement dark/light mode efficiently in your React applications.
Welcome to a youtube channel dedicated to programming and coding related tutorials. We talk about tech, write code, discuss about cloud and devops. That’s what we do all day, all year. We roll out a lot of series and videos on our channel.
All the learning resources such as code files, documentations, articles and community discussions are available on our website:
chaicode.com/
You can find our discord link, github link etc on the above website.
Twitter/X link: x.com/hiteshdo...
Discord link: hitesh.ai/discord
Learn React with 10 projects: • Let's learn react from...
Learn Docker: • A practical guide on D...
Learn Kubernetes: • Complete Kubernetes Co...
How does a browser works: • How does a browser wor...
How nodejs works: • How node JS works | En...
Learn Redux-toolkit: • Learn Redux Toolkit in...
Learn NextJS: • Nextjs Full stack course
Learn Typescript: • Why to learn Typescript
Learn Javascript: • Welcome to new JavaScr...
Learn React Native: • React Native Mastery: ...
Learn Zustand: • React state management...
Learn Golang: • How to get started wit...
enjoying the series.
You are doing a good job, learning a lot from you. Kudos!
❤❤
Hi Hitesh, thanks much for simplifying and sharing this knowledge 🙏
Hitesh sir, you are the reason I started learning frontend. I was more of a backend person
I like your teach style.
Thanks for all you do for the community
Thanks, your motivation driving factor ✓ nailed the explanation well with 2 context api approaches 🎉
You did good man, you did good.
Thanks hitech. Very clear explanation about context api. I just got one question: what if i want to have two (global) contexts in main app.jsx? lets say 'theme context' and 'toast context' for the whole webapp. Then we just need to nest those two providers in app.jsx? Like .....
Thanks for the tutorial
Thank you Hitesh. It would be great to see TypeScript with React as well :)
I've been doing these projects in TS myself, not much changes, you just need to add some types when asked to lol
Your videos are great, having individual mini projects for each concept is very informative
Your presentation style is so engaging and informative. I've learned so much from watching your videos. Keep up the fantastic work
Again a great video !
thanks Hitesh Sir....I am trying to start my career after a very long career break.....Your videos helps alot ....🙂🙂🙂🙂🙂
I got one question. Why we have to defin the functions in the App.jsx. If the functions are static then can't we define them directly in the context file?
thank you for the explanation 👏
Your videos made my developer journey easier
Thank you for the great explanation Hitesh.
i am waiting.. though i didn't watch the other videos of this series...sir i went through your vlogs and courses, your channel seems like it can change my future
Thankyou for explaining it so well
Thank you for all your hard work. You are helping so many people.
Thank you Hitesh for making this context api much eaiser to understand 🙂
hope you will make other videos like this, love it
Thank you sir for such an amazing tutorial
hi, I have a problem with my LCO account it is not showing my content, is it a server issue or what
Waiting for the reply
If any issues please release as soon as possible
It’s now managed by ineuron. Please reach out to query@ineuron.ai for assistance. They own it now. 🙂
left the comment cause your content is very helpful for me
love you guruji
Thanks sir for providing this valuable content.
Subject: Request for a Micro Frontend Series
Dear Hitesh Sir,
I hope this message finds you well. I wanted to express a suggestion that I believe would greatly benefit our community of learners. Could you please consider creating a series on MicroFrontends? Such a series would undoubtedly prove to be immensely helpful for everyone eager to enhance their knowledge in this domain.
Thank you for considering my request, and I look forward to hearing your thoughts on this matter.
Best regards,
Ankush Chavan
I was thinking that if you needed to use many stores, this could get a bit confusing, happy you acknowledged at the end that Redux Toolkit is favorable in those situations, haha great video though!
Very valuable videos. Thanks again, Hitesh!
Hitesh sir please come with multiple nested context with usereducer combination project bcoz in Internet most videos are just single context project humble request to you sir!!
Thankyou for such great quality content
Thankyou so much for this amazing tutorial, need a little bit time to absorb it
Great sir ❤❤❤❤❤
Even though it is bit confusion for me, I will try to understand the need and usage of context api.
Hello Sir, not able to access our LCO courses. I have dropped couple of mails but no response from support team. There was no official mails notifying blocking our access. I have seen in the comments section few other people's also having same issues. If you see this message, could you please tell us what's happening.
Same with me, absolutely pathetic support.
@@srikarkulakcherla2202 I have the same issue. They are not even responding and its been weeks now
same issue for me as well, Please act quickly
@@SudhirVetri I don't think issue will be resolved. From what I learned, physics wallah bought INeuron and LCO. Since then access has been revoked. Don't think they will give the access. They just ruined the good platform.
@@SudhirVetri I don't think issue will be resolved. From what I learned, physics wallah bought INeuron and LCO. Since then access has been revoked. Don't think they will give the access. They just ruined the good platform.
Thank you so much for the amazing series learnt a lot🤞
Sir plz make 1hr videos it would better for us also sir till now the journey was amazing, hoping to do major projects with you
Keep going bro excellent series
i hvae taken the react js course on lco, but not able to login. i have also written several mails but no action taken
Same with me also
Really helpful, waiting for next video.
Thank you!!
in react series why to use document.queryselector,
Awesome video for beginner Developers
love all your videos
Fun Fact: You can completely delete theme.js from the project and it still works fine. I imagine what was implented in App.jsx could also be moved into the object in theme.js?? Not quite following. Any insight greatly appreciated.
Thank you soooo much
good teaching method
Thank you for such a valuable content
second method is very helpful where we create, aware & use the method in single file.
Thank you
Thank you for your great content☺☺
Hitesh Paapi ❌Hitesh Choudhary✅
Thank you for the lesson ❤.
Awesome videos!!!
Using vanilla javascript code, inside React isn't recommended right ??
You are doing great work
hey man thanks for this video!!
Thank you❤❤
your are op sir
Do you have react js series? Like your js
Hey Hitesh I bought pro backend course from lco but currently not able to acess it , I have mailed you details please look into it
It’s now managed by ineuron. Please reach out to query@ineuron.ai for assistance. They own it now. 🙂
@hitesh, i just take some reference from your portfolio website, i found an ui related bug in your website in the video section, your video close btn is not working, thank you.
awesome explanation
❤
Why did we add this line
darkMode: "class"
in tailwind.config.js file at the end of the video ?
What is the significance of this addition ?
did you get it bro? cauz I have same doubt
No bro , I hadn't researched after that. If you come across the explanation anywhere please let me know too.@@aadityapuri1061
Hi Sir, thank you for video, when I am trying to login into your app, it's showing it's blocked by admin, what's the reason? I tried multiple times Sir @ Hitesh Choudhary Sir
I am an unable to buy course from your official website
Where's the GitHub repository
❤❤❤
now im here
Frankly I enjoy "chai aur code" more.
Love you
❤
Hello Sir,
Sorry I am disturbing you here, but I am not able to access my courses in LCO Platform. When I login with my account then it's shows that I can't access my course and contact admin. I mailed you and also raised a ticket in LCO platform but no response.
May you please help me resolve this issue.
#LCO ♥
PW just acquired LCO from ineuron. Its no longer in SIR's hands. I just came to know that now. We just lost a good content. Better look for something else.
@@albi712same here, not able to access on app through gmail
@@albi712 do you think Sir has no responsibility over my money just because I paid for it at the moment he was handling it? do you think that money was easy to earn? the money which I paid was my effort and time and energy, so easy of you to defend your sir. did he just handed over the platform for free?
@@-UPH-KRISHNAM just like you I paid for a course and was not able to access it. Sent out couple of mails but no response from anybody. Later I came to know a comment from SIRs Instagram account saying that not in their hands since it's been acquired by ineuron and sold it to someone else.
@@-UPH-KRISHNAM I m not defending anyone. Just that no one is taking responsibility for the money we paid for the course or access issues. Maybe u can try sending mails to support but no one is going to reply back.
hi hitesh from Turkey
Bhiya apse milna hi jecrc university mai I m in btech 1st year cse
👍👍👍👍
Thank You
Thanks a lot
EROOR -> darkTheme() is not triggering
CODE ->
function App({ children }) {
const [themeMode, setThemeMode] = useState("light");
const darkTheme = () => {
console.log("darkTheme");
setThemeMode("dark");
document.body.setAttribute("data-theme", "dark");
};
const lightTheme = () => {
setThemeMode("light");
document.body.setAttribute("data-theme", "light");
};
return (
{children}
);
}
Sir app to Japan m ho too app vha se live ho
Thanks again
good, thank you
Awesome
Thanks ❤
❤🎉
great
awesome
Lijiye sir kr diya comment
Thank you so much❤❤
🥰
just leave a comment
Outstanding
Nice👍
nice
superbb
🌎
👋👍