Light / Dark Mode Toggle In React Tutorial

Поділитися
Вставка
  • Опубліковано 28 лис 2024

КОМЕНТАРІ • 103

  • @egzongallapeni8098
    @egzongallapeni8098 2 роки тому +19

    Man this is catching 2 birds with 1 stone basically explaining contextApi and toggle .Bless you man

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +3

      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.

  • @AnshumanBisoyi
    @AnshumanBisoyi Рік тому +1

    You are my favorite coder-teacher-youtuber.

  • @ko3ak112
    @ko3ak112 Рік тому

    Dont worry bro. The explanation was pretty clear. We don't have any idea how cool you really are. Thanks 🙏

  • @Smartercow
    @Smartercow 2 роки тому +4

    Man your recent uploads have been good! Exactly what I want! Keep it up!

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +1

      Hahaha I've been doubling my time with each video! Glad you are liking them :)

  • @ThColinPereira
    @ThColinPereira 2 роки тому +2

    the editing of your videos has improved so much!

  • @walterbranco8798
    @walterbranco8798 2 роки тому +16

    Sempre com videos práticos e direto ao ponto. Valeu, Pedro!

  • @voldemortvi4264
    @voldemortvi4264 2 роки тому +2

    Dont stop uploading , i love your videos ! thank you !!

  • @gonsalomon
    @gonsalomon 2 роки тому +1

    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!

    • @Dedition
      @Dedition 2 роки тому

      Hopefully this isn't still true for you.

  • @NotDead10008
    @NotDead10008 2 роки тому +3

    The best react channel.

  • @arjun-de6dr
    @arjun-de6dr 2 роки тому +3

    At the right time pedro 🙂, I was thinking of it and then your video pops up.
    This will help me a lot.
    Thanks man!!

  • @adimishra3046
    @adimishra3046 2 роки тому +11

    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 ❤️❤️

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +2

      Hahaha glad to hear it! I always try to follow recommendations from my subs :)

  • @anuragchindaliya
    @anuragchindaliya 2 роки тому +4

    Css variables work like charm for theme modes

  • @ndahayokevin7626
    @ndahayokevin7626 2 роки тому +1

    Exactly we needed it much ! thanks Pedro

  • @AkashGupta-rw4vm
    @AkashGupta-rw4vm 2 роки тому +5

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

    • @jesuschristimsmall
      @jesuschristimsmall 2 роки тому

      can you expand on this please? or did you have any exmaples of code

  • @aritnath151
    @aritnath151 Рік тому +1

    Hey there, wanted to ask,
    If we have multiple pages in a webpage, How to convert that entirely ??

  • @bilalch898
    @bilalch898 2 роки тому +3

    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.

  • @amateruss
    @amateruss Рік тому +1

    You can just use setTheme(!theme) inside your toggleTheme function, right?

  • @pushin.P
    @pushin.P 10 місяців тому

    Thank you so much Pedro! you went straight to the point and explained everything pretty easy!

  • @piotrszczesniak685
    @piotrszczesniak685 2 роки тому

    Perdo, you have become my best resource to learn React 👋👋🙋‍♂🙋‍♂💪💪🔥🔥

  • @universecode1101
    @universecode1101 2 роки тому +3

    Nice ✌🏻this is very helpful

  • @ujjvalw2684
    @ujjvalw2684 2 роки тому +1

    Very useful video... Good stuff man

  • @EmiStruggles
    @EmiStruggles Рік тому

    Hi, thanks for the help, if anyone's background color is not dynamic, check your root in css, that's probably the problem.

  • @juancarlosrodriguez1085
    @juancarlosrodriguez1085 6 місяців тому +1

    Great!…as always!…

  • @franciscosoares4128
    @franciscosoares4128 2 роки тому +1

    Can u please make a video explaining how to record an audio and storing into firestore??Would appreciate that!
    Love the content

  • @ivan4486
    @ivan4486 10 місяців тому

    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.

  • @felixl8961
    @felixl8961 2 роки тому +1

    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

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

  • @okpanumebuka2862
    @okpanumebuka2862 2 роки тому +1

    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

  • @DucAnh-io7hg
    @DucAnh-io7hg 3 місяці тому

    i have a question. how can you make the animation for the switch. i've tried many ways but it didn't work

  • @zekeriyacinal3007
    @zekeriyacinal3007 7 місяців тому

    This was really helpful, thank you for the video!

  • @aniketbhalla1521
    @aniketbhalla1521 2 роки тому +1

    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.

    • @gonsalomon
      @gonsalomon 2 роки тому

      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.

  • @stephontreadwell1664
    @stephontreadwell1664 Рік тому

    DAMN Pedro! This was a dope tutorial. Thank you so much!

  • @vitorzbr9013
    @vitorzbr9013 2 роки тому

    Mate... Awesome tutorial, keep up with the content!

  • @PandaLaVeraa
    @PandaLaVeraa 2 роки тому +2

    That was fire! Super efficient and definitely using SCSS with it helped a bit, organizing. Definitely subscribing!

  • @MiikaKontio
    @MiikaKontio 2 роки тому

    Great tutorial. This helped me to quickly build dark theme for my react application

  • @kashmirtechtv2948
    @kashmirtechtv2948 2 роки тому +1

    Intro 🔥

  • @dongnez
    @dongnez 2 роки тому +2

    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

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому

      If it works then you can do that, although I would avoid accessing the document in react

  • @sarthaksrivastava6245
    @sarthaksrivastava6245 2 роки тому

    Thanks pedro! I really liked your explanation.

  • @joshdelacruz-tm6lg
    @joshdelacruz-tm6lg Рік тому

    how can i change the size and height if i use media query? className doesnt work to react-switch

  • @trigga3085
    @trigga3085 2 роки тому

    Your videos are so good. Thank you, man

  • @molaraiche
    @molaraiche 2 роки тому +1

    You are incredible ^^ thank you for this valuable content

  • @friendlyapk
    @friendlyapk 2 роки тому +1

    Toggle is resetting or triggering twice for some reason! Why!

  • @berkaysenoglu1784
    @berkaysenoglu1784 10 місяців тому

    how can I change body background color depending on theme?

  • @alexandreluiz6182
    @alexandreluiz6182 2 роки тому

    Thanks Pedro! That was very helpful. How can I save the theme on localStorage in order to save the user's preference?

  • @mabrarhassan
    @mabrarhassan Рік тому

    Wonderful and entertaining as well as informative video I just enjoyed watching.

  • @МарияГалко-ж7п
    @МарияГалко-ж7п 2 роки тому

    Thanks a lot for this video!! I'm really happy to do it so quickly 😍

  • @cristiankeibersbardelotto
    @cristiankeibersbardelotto 2 роки тому

    Thank you! It will help me so much!

  • @alexissantaana3908
    @alexissantaana3908 2 роки тому

    Great tutorial. Subscribed.

  • @ujjvalw2684
    @ujjvalw2684 2 роки тому +1

    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

  • @rovio_3365
    @rovio_3365 Рік тому

    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 .

  • @shashwattulsyan8522
    @shashwattulsyan8522 2 роки тому +1

    hey can you please make a seperate video form storing user details along with files like image and pdf in mongoDB(MERN).

  • @RazmonTheArtist
    @RazmonTheArtist Рік тому

    how would I pass the themes to other components?

  • @lukamatovic8302
    @lukamatovic8302 Рік тому

    How to make this using CSS modules instead of global CSS like in the video?

  • @calarcher4869
    @calarcher4869 2 роки тому

    If you refresh the page in dark mode in your example, it will turn it back to light mode

  • @danielrondongarcia9905
    @danielrondongarcia9905 Рік тому

    Perfect video! Thanks!!

  • @serghaouiyoussef962
    @serghaouiyoussef962 2 роки тому +1

    Awesome video!
    I do think that using SCSS would make things a little bit cleaner.
    cheers 👌👌

  • @nikako1889
    @nikako1889 2 роки тому

    which theme do u use?

  • @Messi2Inno
    @Messi2Inno 2 роки тому

    Hey! Pedro, you mind doing a video with golang as backend and react as frontend with SQL database??

  • @sunil_mg_photography
    @sunil_mg_photography 2 роки тому +2

    how to do same thing using styled component

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому

      I definitely can :) With styled components it would be even easier hahaha

    • @sunil_mg_photography
      @sunil_mg_photography 2 роки тому

      @@PedroTechnologies Waiting for that video bro😍😍

  • @gavinwalsh8417
    @gavinwalsh8417 2 роки тому

    Great Video! very helpful

  • @vicenzofrusciante5996
    @vicenzofrusciante5996 11 місяців тому

    é brasileiro esse pedro ai? parabens pela coragem

  • @fernandofeks2918
    @fernandofeks2918 4 місяці тому

    Mano seu inglês é absurdo de bom

  • @preciouscancode
    @preciouscancode Місяць тому

    It doesn't work when I try to put the button in my navbar

  • @njourawebdev
    @njourawebdev 2 роки тому

    thank man really appreciate it

  • @minsungsuh3872
    @minsungsuh3872 2 роки тому

    Thank you so much!

  • @ricardohernandez8033
    @ricardohernandez8033 2 роки тому

    Perfect job, thanks....

  • @markomatic8459
    @markomatic8459 10 місяців тому

    👏saved my time💪

  • @oneManDev
    @oneManDev 2 роки тому

    But how do I save the theme to localStorage using useEffect hook?

  • @abrarahmed6935
    @abrarahmed6935 2 роки тому +1

    redux toolkit , redux thunk complete video please .. 🙏😅

  • @cnoot
    @cnoot 11 місяців тому

    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

  • @abhaytiwari6411
    @abhaytiwari6411 2 роки тому +3

    Nice 😎👍

  • @regilearn2138
    @regilearn2138 2 роки тому

    Please create Next.js/REST API/Typescript/Tailwind CSS/Prisma/PostgreSQL stack for next project

  • @diaael-din8832
    @diaael-din8832 2 роки тому

    ty that was helpful

  • @jasoncarzano9388
    @jasoncarzano9388 2 роки тому

    Why my children components not affecting to dark mode? Anyone can help me plzz?

  • @braumski2
    @braumski2 11 місяців тому

    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

  • @Hisham.Mohamed-g2b
    @Hisham.Mohamed-g2b 5 місяців тому

    thank you

  • @tkot7857
    @tkot7857 2 роки тому

    11:04 to add switch

  • @adegbuluayomiposi5478
    @adegbuluayomiposi5478 2 роки тому

    Thanks

  • @melodia6875
    @melodia6875 5 місяців тому

    Bom vídeo. VAI BRASIL!

  • @abdulmomin-yq4mt
    @abdulmomin-yq4mt 2 роки тому

    tnxxx🥰

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

  • @cocoon1538
    @cocoon1538 Рік тому

    It's a purple mode

  • @it.b.10.mayoormoolya69
    @it.b.10.mayoormoolya69 2 роки тому

    10:04

  • @alexwood4426
    @alexwood4426 2 роки тому

    what is life

  • @abulazaiemabas5070
    @abulazaiemabas5070 2 роки тому

    Im really sorry, couldn't finish the video

  • @abulazaiemabas5070
    @abulazaiemabas5070 2 роки тому

    Dude!!!, Start using typescript, this is ugly🤢

    • @PedroTechnologies
      @PedroTechnologies  2 роки тому +6

      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.

    • @hiwotina26
      @hiwotina26 2 роки тому

      Very helpful for beginners! Thanks 🙏🙏🙏

  • @cryptonicchronic8111
    @cryptonicchronic8111 2 роки тому +2

    youre awesome bro!!!! get a discord or telegra, channel love to chat with ya! thanks again!

  • @Messi2Inno
    @Messi2Inno 2 роки тому

    Hey! Pedro, you mind doing a video with golang as backend and react as frontend with SQL database??