Man this is catching 2 birds with 1 stone basically explaining contextApi and toggle .Bless you man
@PedroTechnologies2 жыл бұрын
Hahaha Glad you liked it! Although I wanted the code to look simple, I knew that anyone who wanted to do this in their website would eventually have to manage their states.
@walterbranco87982 жыл бұрын
Sempre com videos práticos e direto ao ponto. Valeu, Pedro!
@arjun-de6dr2 жыл бұрын
At the right time pedro 🙂, I was thinking of it and then your video pops up. This will help me a lot. Thanks man!!
@PedroTechnologies2 жыл бұрын
Glad to hear it!
@Smartercow2 жыл бұрын
Man your recent uploads have been good! Exactly what I want! Keep it up!
@PedroTechnologies2 жыл бұрын
Hahaha I've been doubling my time with each video! Glad you are liking them :)
@adimishra30462 жыл бұрын
Sometimes I think u keep a track of what should I learn next... 😜thanks for the video brother you never disappoint... highly appreciate your quality work and love from India ❤️❤️
@PedroTechnologies2 жыл бұрын
Hahaha glad to hear it! I always try to follow recommendations from my subs :)
@AnshumanBisoyi Жыл бұрын
You are my favorite coder-teacher-youtuber.
@voldemortvi42642 жыл бұрын
Dont stop uploading , i love your videos ! thank you !!
@ThColinPereira2 жыл бұрын
the editing of your videos has improved so much!
@anuragchindaliya2 жыл бұрын
Css variables work like charm for theme modes
@ko3ak112 Жыл бұрын
Dont worry bro. The explanation was pretty clear. We don't have any idea how cool you really are. Thanks 🙏
@NotDead100082 жыл бұрын
The best react channel.
@PedroTechnologies2 жыл бұрын
Thank You :)
@bilalch8982 жыл бұрын
Pretty easy and much more flexible with Mui as you won't need to keep record of each element id or classes and manage their styles individually.
@gonsalomon2 жыл бұрын
The fact you got Copilot running helps it to be more approachable. I can't live without it, so it's astonishing there's a dev with more experience who also uses it. Thank you!
@Dedition2 жыл бұрын
Hopefully this isn't still true for you.
@AkashGupta-rw4vm2 жыл бұрын
One of the best solution to change the styles of different components according to the theme is by using css custom properties and just change those custom property according to theme and it will be reflected to the whole website. Hope this helps 😌😌
@jesuschristimsmall2 жыл бұрын
can you expand on this please? or did you have any exmaples of code
@pushin.P9 ай бұрын
Thank you so much Pedro! you went straight to the point and explained everything pretty easy!
@ndahayokevin76262 жыл бұрын
Exactly we needed it much ! thanks Pedro
@juancarlosrodriguez10854 ай бұрын
Great!…as always!…
@PandaLaVeraa2 жыл бұрын
That was fire! Super efficient and definitely using SCSS with it helped a bit, organizing. Definitely subscribing!
@franciscosoares41282 жыл бұрын
Can u please make a video explaining how to record an audio and storing into firestore??Would appreciate that! Love the content
@EmiStruggles Жыл бұрын
Hi, thanks for the help, if anyone's background color is not dynamic, check your root in css, that's probably the problem.
@ivan44869 ай бұрын
I suggest putting colors into CSS variables and make two sets of those vars - for a light and a dark theme. It would spare you rewriting styles for all elements.
@universecode11012 жыл бұрын
Nice ✌🏻this is very helpful
@CGAR_420 Жыл бұрын
The way ive been doing dark mode now is setting default color variables in my root CSS. Then i change the value of those root css variables for each theme. Then it's easy to add more themes later since every component will use color: var(--buttonColor1) You just keep redefining --buttonColor1
@piotrszczesniak6852 жыл бұрын
Perdo, you have become my best resource to learn React 👋👋🙋♂🙋♂💪💪🔥🔥
@ujjvalw26842 жыл бұрын
Very useful video... Good stuff man
@MiikaKontio2 жыл бұрын
Great tutorial. This helped me to quickly build dark theme for my react application
@zekeriyacinal30076 ай бұрын
This was really helpful, thank you for the video!
@stephontreadwell1664 Жыл бұрын
DAMN Pedro! This was a dope tutorial. Thank you so much!
@felixl89612 жыл бұрын
Good video. I am just thinking the context is not necessary in this example. The state is already enough. Maybe you should expand the example to include the usage of context
@okpanumebuka28622 жыл бұрын
God bless you!! Please if I want the toggle to be an image like a sun ☀️ for light and moon 🌙 for dark how can I do that
@vitorzbr90132 жыл бұрын
Mate... Awesome tutorial, keep up with the content!
@kashmirtechtv29482 жыл бұрын
Intro 🔥
@sarthaksrivastava62452 жыл бұрын
Thanks pedro! I really liked your explanation.
@trigga30852 жыл бұрын
Your videos are so good. Thank you, man
@aritnath151 Жыл бұрын
Hey there, wanted to ask, If we have multiple pages in a webpage, How to convert that entirely ??
@aniketbhalla15212 жыл бұрын
That's great, but if we purge our CSS to increase performance of website? We will no longer have access to styling in the opposite mode.
@gonsalomon2 жыл бұрын
I guess you can use inline styling, pre-set from the JS itself (or if you generate your page on a server, make the algorithm generating the code to also include that styling on it). It wouldn't affect performance since styling is quite lowweight, compared to a database request which could lag your page quite much more.
@МарияГалко-ж7п2 жыл бұрын
Thanks a lot for this video!! I'm really happy to do it so quickly 😍
@amateruss Жыл бұрын
You can just use setTheme(!theme) inside your toggleTheme function, right?
@serghaouiyoussef9622 жыл бұрын
Awesome video! I do think that using SCSS would make things a little bit cleaner. cheers 👌👌
@cristiankeibersbardelotto Жыл бұрын
Thank you! It will help me so much!
@danielrondongarcia9905 Жыл бұрын
Perfect video! Thanks!!
@molaraiche2 жыл бұрын
You are incredible ^^ thank you for this valuable content
@alexandreluiz61822 жыл бұрын
Thanks Pedro! That was very helpful. How can I save the theme on localStorage in order to save the user's preference?
@mabrarhassan Жыл бұрын
Wonderful and entertaining as well as informative video I just enjoyed watching.
@alexissantaana39082 жыл бұрын
Great tutorial. Subscribed.
@shashwattulsyan85222 жыл бұрын
hey can you please make a seperate video form storing user details along with files like image and pdf in mongoDB(MERN).
@Messi2Inno2 жыл бұрын
Hey! Pedro, you mind doing a video with golang as backend and react as frontend with SQL database??
@gavinwalsh84172 жыл бұрын
Great Video! very helpful
@friendlyapk2 жыл бұрын
Toggle is resetting or triggering twice for some reason! Why!
@dongnez2 жыл бұрын
I wanna answer because i change css var() in the index with document.document.element.style.setProperty and use a toggle to make theme change and i wanna know if that is right
@PedroTechnologies2 жыл бұрын
If it works then you can do that, although I would avoid accessing the document in react
@rovio_336511 ай бұрын
That was awesome ! But I encountered a problem . How can i toggle it using a component which is inside a header that his inside tha app.js . I don't know how to do it I'm totally new .
@DucAnh-io7hg2 ай бұрын
i have a question. how can you make the animation for the switch. i've tried many ways but it didn't work
@njourawebdev2 жыл бұрын
thank man really appreciate it
@ujjvalw26842 жыл бұрын
How do I deploy a full stack meen app for free? Like a college project? Any free solution? Ik GPages for react but what about server
@calarcher48692 жыл бұрын
If you refresh the page in dark mode in your example, it will turn it back to light mode
@minsungsuh38722 жыл бұрын
Thank you so much!
@abhaytiwari64112 жыл бұрын
Nice 😎👍
@markomatic84598 ай бұрын
👏saved my time💪
@ricardohernandez80332 жыл бұрын
Perfect job, thanks....
@joshdelacruz-tm6lg Жыл бұрын
how can i change the size and height if i use media query? className doesnt work to react-switch
@diaael-din88322 жыл бұрын
ty that was helpful
@abrarahmed69352 жыл бұрын
redux toolkit , redux thunk complete video please .. 🙏😅
@vicenzofrusciante599610 ай бұрын
é brasileiro esse pedro ai? parabens pela coragem
@berkaysenoglu17848 ай бұрын
how can I change body background color depending on theme?
@lukamatovic8302 Жыл бұрын
How to make this using CSS modules instead of global CSS like in the video?
@regilearn21382 жыл бұрын
Please create Next.js/REST API/Typescript/Tailwind CSS/Prisma/PostgreSQL stack for next project
@fernandofeks29183 ай бұрын
Mano seu inglês é absurdo de bom
@sunilmg7232 жыл бұрын
how to do same thing using styled component
@PedroTechnologies2 жыл бұрын
I definitely can :) With styled components it would be even easier hahaha
@sunilmg7232 жыл бұрын
@@PedroTechnologies Waiting for that video bro😍😍
@braumski210 ай бұрын
Man I was working on this for so many hours... I just had some CSS syntax wrong the whole time. Dear lord I'm sad
@RazmonTheArtist Жыл бұрын
how would I pass the themes to other components?
@nikako18892 жыл бұрын
which theme do u use?
@Hisham.Mohamed-g2b3 ай бұрын
thank you
@cnoot9 ай бұрын
nice video i learn a lot from it but i have one problem that i struggle and cant pass it even with stackoverflow, ai etc. help. so basically i need to put my reactswitch in exactly position in but how to make it funcional to toggle in header has a funcionality in the whole app.jsx. if anyone has some solution for it i ll be very thankfull :D
@oneManDev2 жыл бұрын
But how do I save the theme to localStorage using useEffect hook?
@yunakaito25132 жыл бұрын
same question
@abdulmomin-yq4mt2 жыл бұрын
tnxxx🥰
@adegbuluayomiposi54782 жыл бұрын
Thanks
@tkot78572 жыл бұрын
11:04 to add switch
@PatalJunior Жыл бұрын
This isn't ideal, instead of doing multiple background colors, just create some css variables and change their values depending on light or dark mode. I feel like it would be better, and easier to understand.
@jasoncarzano93882 жыл бұрын
Why my children components not affecting to dark mode? Anyone can help me plzz?
@melodia68753 ай бұрын
Bom vídeo. VAI BRASIL!
@cocoon1538 Жыл бұрын
It's a purple mode
@it.b.10.mayoormoolya692 жыл бұрын
10:04
@alexwood44262 жыл бұрын
what is life
@abulazaiemabas50702 жыл бұрын
Im really sorry, couldn't finish the video
@abulazaiemabas50702 жыл бұрын
Dude!!!, Start using typescript, this is ugly🤢
@PedroTechnologies2 жыл бұрын
I use javascript for personal projects, but why would i ignore most of the beginner developers who still haven't learned typescript? My channel isn't just for me, its for my viewers. I do prefer to code with typescript, but I have to think about my subscribers who don't know it.
@hiwotina262 жыл бұрын
Very helpful for beginners! Thanks 🙏🙏🙏
@cryptonicchronic81112 жыл бұрын
youre awesome bro!!!! get a discord or telegra, channel love to chat with ya! thanks again!
@Messi2Inno2 жыл бұрын
Hey! Pedro, you mind doing a video with golang as backend and react as frontend with SQL database??