Fullstack Simplified
Fullstack Simplified
  • 36
  • 182 774
How to Implement Dark Mode in React Like a Pro
This video is all about how to use implement dark mode based on user as well system preferences in a React web app using material-ui 5, typescript, following best practices and industry standard coding patterns.
📚 Materials/References:
- React Context Tutorial: th-cam.com/video/DQxQQydJg3k/w-d-xo.html
- React useRef Tutorial: th-cam.com/video/gwFfzIaKnAU/w-d-xo.html
- Material UI: mui.com/material-ui/getting-started/
- Material UI Dark Mode: mui.com/material-ui/customization/dark-mode/
- Vite: vitejs.dev
💻 Topics Covered:
- Vite + React setup via CLI
- Setting up Material UI
- Creating custom themes
- React Context
- React Ref
🌎 Find Me Here:
My Website: prasoon.me
LinkedIn: www.linkedin.com/in/prosoon-goswami
Twitter: PraSoonGosWami4
GitHub: github.com/FullstackSimplified
Instagram: fullstack_simplified
มุมมอง: 2 932

วีดีโอ

JavaScript Interview Questions 2023 - Polyfills
มุมมอง 520ปีที่แล้ว
JavaScript Interview Questions 2023 - Polyfills
React useEffect: Everything you should know
มุมมอง 545ปีที่แล้ว
React useEffect: Everything you should know
Build custom elements with Web Components using vanilla Javascript
มุมมอง 8K2 ปีที่แล้ว
Build custom elements with Web Components using vanilla Javascript
Firebase Hosting using GitHub Actions - React | CI/CD
มุมมอง 15K2 ปีที่แล้ว
Firebase Hosting using GitHub Actions - React | CI/CD
React Router v6 | Public and Protected Routes
มุมมอง 33K2 ปีที่แล้ว
React Router v6 | Public and Protected Routes
Firebase v9 Authentication in React | Google & GitHub Sign In
มุมมอง 4.3K2 ปีที่แล้ว
Firebase v9 Authentication in React | Google & GitHub Sign In
Firebase v9 Storage in React | Upload Files to Cloud
มุมมอง 30K3 ปีที่แล้ว
Firebase v9 Storage in React | Upload Files to Cloud
Firebase v9 Authentication in React | Email-Password Auth | Forgot Password
มุมมอง 20K3 ปีที่แล้ว
Firebase v9 Authentication in React | Email-Password Auth | Forgot Password
React Context API | Manage Global State
มุมมอง 2.4K3 ปีที่แล้ว
React Context API | Manage Global State
JavaScript Promise in 9 Minutes
มุมมอง 3763 ปีที่แล้ว
JavaScript Promise in 9 Minutes
JavaScript Array Methods You Must Use (with Examples)
มุมมอง 3753 ปีที่แล้ว
JavaScript Array Methods You Must Use (with Examples)
Firebase v8 Storage in React | Upload Files to Cloud
มุมมอง 2.9K3 ปีที่แล้ว
Firebase v8 Storage in React | Upload Files to Cloud
React useRef and forwardRef in depth
มุมมอง 25K3 ปีที่แล้ว
React useRef and forwardRef in depth
Everything about React Portals in 10 minutes
มุมมอง 12K3 ปีที่แล้ว
Everything about React Portals in 10 minutes
Learn React Custom Hooks in 7 minutes | Create useFetch hook
มุมมอง 1.2K3 ปีที่แล้ว
Learn React Custom Hooks in 7 minutes | Create useFetch hook
Data fetching in React using Suspense | React Concurrent Mode
มุมมอง 1.7K3 ปีที่แล้ว
Data fetching in React using Suspense | React Concurrent Mode
5 Must Have Visual Studio Code Extensions - 2021
มุมมอง 3753 ปีที่แล้ว
5 Must Have Visual Studio Code Extensions - 2021
Deploying React Web App on Firebase - Completely free | Easy Hosting
มุมมอง 6K3 ปีที่แล้ว
Deploying React Web App on Firebase - Completely free | Easy Hosting
Building forms in React with Material-UI, Formik and Yup
มุมมอง 10K3 ปีที่แล้ว
Building forms in React with Material-UI, Formik and Yup

ความคิดเห็น

  • @thevaldoos
    @thevaldoos หลายเดือนก่อน

    puedes compartir el codigo ?

  • @fsassiv
    @fsassiv 2 หลายเดือนก่อน

    You are a life savior.

  • @bhaveshjadav804
    @bhaveshjadav804 2 หลายเดือนก่อน

    are you copying the web dev simplified ???

  • @shubhampatil5935
    @shubhampatil5935 2 หลายเดือนก่อน

    from where I will get source code?

  • @abeesh9927
    @abeesh9927 3 หลายเดือนก่อน

    How to add custom color for light and dark theme, instead of default color

  • @vloggingwithMisha
    @vloggingwithMisha 5 หลายเดือนก่อน

    Commendable 👏🏻

  • @georgylistopad3976
    @georgylistopad3976 6 หลายเดือนก่อน

    Thank you soooooooooooo MUCH!!❤

  • @chhavimanichoubey9437
    @chhavimanichoubey9437 6 หลายเดือนก่อน

    web dev simplified - indian version?

    • @FullstackSimplified
      @FullstackSimplified 5 หลายเดือนก่อน

      Glad you consider the same. Trying to make things easier to understand.

  • @amarmusovic7748
    @amarmusovic7748 6 หลายเดือนก่อน

    Great tutorial! Thanks! You really helped me out with this stuff... ☺☺

  • @deepaksaroha522
    @deepaksaroha522 6 หลายเดือนก่อน

    usecase 2 and 2 not same?

  • @YuvrajSingh-sm8nx
    @YuvrajSingh-sm8nx 7 หลายเดือนก่อน

    How can we add environment variables?.. please reply

  • @brij1728
    @brij1728 7 หลายเดือนก่อน

    Finally, I learned how to implement a theme using MUI. Thanks a lot, buddy.

  • @DrykoTech
    @DrykoTech 7 หลายเดือนก่อน

    Good video man!

  • @karthikpuvvula
    @karthikpuvvula 8 หลายเดือนก่อน

    what to input here if the repo is inside an organization ? ? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository)

  • @kashmirtechtv2948
    @kashmirtechtv2948 8 หลายเดือนก่อน

    What about showing and not showing Navbar?

    • @FullstackSimplified
      @FullstackSimplified 8 หลายเดือนก่อน

      You can do the similar thing, use ternary to show/hide navbar based on auth state

  • @switchlyrics.
    @switchlyrics. 9 หลายเดือนก่อน

    thank yoou

  • @tahep3906
    @tahep3906 9 หลายเดือนก่อน

    thanks a lot for covering this complex subject, it works flawlessly

  • @stelmachanna7329
    @stelmachanna7329 9 หลายเดือนก่อน

    Thank you !!! it was relly clear , a could deployed , great !!!

  • @hassanbajwa5640
    @hassanbajwa5640 10 หลายเดือนก่อน

    one of the best video of amaizng explanantion, I dont commit normally but you deserve.

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Thanks a lot. Really glad you liked it

  • @SimranRaj8888
    @SimranRaj8888 10 หลายเดือนก่อน

    Amazing explanation 👏

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Glad it helped. Thanks for watching

  • @k_n_goswami
    @k_n_goswami 10 หลายเดือนก่อน

    Great job, Rajat!

  • @webdevschool6597
    @webdevschool6597 10 หลายเดือนก่อน

    Thank You, Keep doing Indian

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Thanks for watching. Do checkout my latest video on the channel as well on react dark mode - th-cam.com/video/VwvXjZIo7ys/w-d-xo.htmlsi=w3jhLV6RUt4WkCst

  • @supriyamukherjee1575
    @supriyamukherjee1575 10 หลายเดือนก่อน

    Bah darun Khub bhalo..... Congratulations 👌👌👌👌

  • @akashbose3682
    @akashbose3682 10 หลายเดือนก่อน

    Really appreciate how you explain things in a simple way. Loved it❤

  • @animeshanand441
    @animeshanand441 10 หลายเดือนก่อน

    Nicely Explained

  • @gauravranjan9132
    @gauravranjan9132 10 หลายเดือนก่อน

    Great content . Amazing video and explanation 👏👏😊😊

  • @kumarsujit1784
    @kumarsujit1784 10 หลายเดือนก่อน

    Prosoon Goswami just brewed up a React storm in his latest TH-cam masterpiece, "Master React Dark Mode: Unraveling Usee & System Theme Preferences in Material UI-5." 🌌 It's the tech fiesta for computer engineers, IT sorcerers, and CS-IT engineering mavens. Pro tip: Watching this video is like adding rocket fuel to your React journey-strap in and enjoy the ride! 🚀 Don't be shy; hit play, drop a like, and join the cool gang by subscribing to Prosoon's TH-cam channel. Let's turn this coding party into a rave! 🎉💻 #ReactDarkMode #MaterialUI5 #ReactTutorial #CodeMasters #ITDevelopment #CSStudents #TechGenius #SubscribeNow #CodingMagic #ReactThemePreferences

  • @vloggingwithMisha
    @vloggingwithMisha 10 หลายเดือนก่อน

    Amazing I got to learn alot from you!

  • @osamansr5281
    @osamansr5281 10 หลายเดือนก่อน

    what about the "secret api keys" how to handle them? do you also push them to the remote repo ?? I'm getting FirebaseError: Firebase: Error (auth/invalid-api-key).

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      For api keys you need to create your own. Ideally it is not recommended to push the secret api keys to remote git repo. You can add the particular file to .gitignore and it won’t push it to the remote repo

  • @habibulislam3386
    @habibulislam3386 11 หลายเดือนก่อน

    great explaination..

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Thanks for watching. Glad this helped

  • @Pareshbpatel
    @Pareshbpatel ปีที่แล้ว

    A very clear explaination of useRef and forwardRef. Thanks. {2023-11-09}, {2024-03-22}

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Glad you liked it. Thanks for watching

  • @MusingMaven
    @MusingMaven ปีที่แล้ว

    how do icheck token id in firebase console

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      I don’t think you can check for token id in the firebase console. They do have a function which you can use in your code to generate token id. You can read more about it here - firebase.google.com/docs/auth/admin/verify-id-tokens#web

  • @abyss7346
    @abyss7346 ปีที่แล้ว

    Los indios van demasiado

  • @tharch77
    @tharch77 ปีที่แล้ว

    Really nice video. But I have a problem. Right after newly registering, I can' see dislayName. Any suggestion?

    • @FullstackSimplified
      @FullstackSimplified 10 หลายเดือนก่อน

      Try checking the user call response by logging it to the console if displayName for the logged in account is available.

  • @lalit-singh-bisht
    @lalit-singh-bisht ปีที่แล้ว

    this is not working for me import ReactDOM from "react-dom"; import { AiOutlineClose } from "react-icons/ai"; const Modal = ({ onClose, isOpen, children }) => { return ReactDOM.createPortal( <> {isOpen && ( <> <div className="z-50 m-auto relative min-h-[200px] max-w-[80%] p-4 bg-white"> <div className="flex justify-end"> <AiOutlineClose onClick={onClose} className="text-2xl" /> </div> </div> <div onClick={onClose} className="absolute top-0 backdrop-blur z-40 h-screen w-screen" > {children} </div> </> )} </>, document.getElementById("portal") ); }; export default Modal;

  • @phaZZi6461
    @phaZZi6461 ปีที่แล้ว

    very clean presentation and explanation. thank you very much

  • @skittlznt2611
    @skittlznt2611 ปีที่แล้ว

    The easiest to understand explanation of this I've seen so far. Thank you 🙏🏽

  • @Pareshbpatel
    @Pareshbpatel ปีที่แล้ว

    React Portals, beautifully explained. Thanks. {2023-07-24}

  • @linhmai6266
    @linhmai6266 ปีที่แล้ว

    thank you for the easy-to-understand tutorial, bro!

  • @SaravanagobiPathmanathan
    @SaravanagobiPathmanathan ปีที่แล้ว

    noob, you can make it deploy in direct push , name: Firebase CI on: push: branches: master jobs: build: runs-on: ubuntu-latest strategy: matrix: node-version: [15.x] steps: - uses: actions/checkout@v2 - name: Use Node.js version ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }} - run: npm i - run: npm install -g firebase-tools - run: CI=false npm run build - name: Archive Build uses: actions/upload-artifact@v2 with: name: build path: build deploy: name: Deploy needs: build runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - name: Download Build uses: actions/download-artifact@v2 with: name: build path: build - name: Deploy to Firebase uses: w9jds/firebase-action@master with: args: deploy --only hosting env: FIREBASE_TOKEN: "${{ secrets.FIREBASE_TOKEN }}"

  • @danialbaloch7885
    @danialbaloch7885 ปีที่แล้ว

    you rock man....keep it up....your code helped alot

  • @codemedic
    @codemedic ปีที่แล้ว

    Thanks a lot for making this video, Its so precise and bulk with information 🎉🎉🥳🥳👍👍.

  • @drivebuss8079
    @drivebuss8079 ปีที่แล้ว

    akhhhh tfooooooooooooo. stupid.

  • @hakim_jazuli
    @hakim_jazuli ปีที่แล้ว

    it's rare for me to upvote a tutorial video... even rarer for me to then comment on it... this is epic...👍

  • @АНТОНЧИРКОВ-ц9и
    @АНТОНЧИРКОВ-ц9и ปีที่แล้ว

    Holistic, cohhesive and comprehensive tutorial. Thank you Prasoon.

  • @ritikashishodia675
    @ritikashishodia675 ปีที่แล้ว

    Use fetch use krne pr vo length ka issue de raha h pata nahi kyo.... Data bhi fetch horra pr vo leanght vali error resolve nahi ho rahi

    • @FullstackSimplified
      @FullstackSimplified ปีที่แล้ว

      Can you please share your code snippet so that i can understand the error better

  • @sagargaud8982
    @sagargaud8982 ปีที่แล้ว

    Thanks men for the firebase setup! great job

  • @dreamArmy34
    @dreamArmy34 ปีที่แล้ว

    hey I want to store two images so how can i achieve that please guide me

    • @FullstackSimplified
      @FullstackSimplified ปีที่แล้ว

      You can select 2 images from the file picker by making it accept multiple images. Then you can loop over the selected images and call the upload function for all the selected images. Or if you want to select one photo at a time then you can open the file picker twice and upload the selected photos one by one using the same upload function

    • @dreamArmy34
      @dreamArmy34 ปีที่แล้ว

      @@FullstackSimplified Actually I was planning to create separate file picker for both images like profileImage and CoverImage. So will I have to create separate handleImageChange Functions ? Or it can be done in one function itself?

    • @FullstackSimplified
      @FullstackSimplified ปีที่แล้ว

      You can use the same function for both. Only thing you need to take care is defining different firebase path/location while uploading the photo

    • @dreamArmy34
      @dreamArmy34 ปีที่แล้ว

      @@FullstackSimplified Thanks!

  • @_its-vikash
    @_its-vikash ปีที่แล้ว

    position : fixed

    • @FullstackSimplified
      @FullstackSimplified ปีที่แล้ว

      Position fixed would add the modal to the under the same patent which we do not want portal doesn't only gives us styling options but also provides us the way to render elements out side the nested dom tree.

  • @aftereffectstraining7668
    @aftereffectstraining7668 ปีที่แล้ว

    good explantion