12. Hiểu rõ cách triển khai Dark Mode & Light Mode trong MUI | ReactJS + Material UI | TrungQuanDev

Поделиться
HTML-код
  • Опубликовано: 6 ноя 2024

Комментарии • 25

  • @trungquandev
    @trungquandev  Год назад +24

    🔔 Note lại một chiếc comment chia sẻ kiến thức rõ ràng và chuyên sâu.
    👉 Ngày hôm nay có một em nhắn tin trên FB với mình và có hỏi một câu hỏi thú vị, nguyên văn là: "để tạo một theme cơ bản với các cài đặt tiêu chuẩn trong mui em search với hỏi chat gpt nó nói khuyến cáo dùng createTheme hơn thay vì extendTheme, thế mình vẫn đang sử dụng extendTheme thì vẫn cứ dùng k ảnh hưởng gì đúng không anh?"
    👉 Mình cũng sẽ để luôn phần trả lời của mình ở đây để các bạn tham khảo thêm cũng như mình muốn lưu lại sau có ai hỏi nữa thì gửi cho dễ :)))
    👉 Nguyên văn câu trả lời của mình là:
    ":)) được rồi, anh sẽ cố giải thích một lần cho em nhé:
    - Thứ nhất: Chat GPT hay bất kể mọi con AI nó đều dựa vào dữ liệu public thu thập được để trả lời các câu hỏi, mặc dù là tốt nhưng phải luôn giữ cho mình tư duy mở + phản biện hơn, đừng bao giờ hoàn toàn tin vào chúng nó nhé em, chỉ tham khảo thôi rồi dựa vào nó mình tìm hiểu rộng kiến thức ra hơn nữa.
    - Thứ 2: cái này chắc em chưa xem kỹ video nè, anh đã dạy cả 2 thứ rồi, đầu tiên là createTheme, tiếp sau đó cái vấn đề mình giải quyết là lỗi flickering khi chuyển dark-light, ở video anh cũng nói luôn, là tác giả nó để cho mình lựa chọn dùng giữa 2 cái => nhấn mạnh nhé, tác giả nó làm ra cái extendTheme và nó đưa vào thư viện cho mình dùng, thì mình đâu cần lo gì nữa em.
    - Thứ ba: cuối nhé, trong video anh cũng đã nói rồi, vẫn là em xem chưa kỹ nè, cái extendTheme nó build on top của createTheme => nghĩa là sao, là mọi thứ của createTheme thì thằng extendTheme đều có => hết lo chưa.
    - Chốt nhé: trong trường hợp này bọn AI nó lấy dữ liệu công khai từ trang chủ MUI, thì cái createTheme là cái official, extendTheme là cái sinh ra sau đó để giải quyết vấn đề, tác giả họ không đưa vào official docs trong phần triển khai chính thức, => dĩ nhiên câu trả lời của AI sẽ có những cái đúng kiểu robot, còn ở đây anh đã gắng tìm hiểu rất nhiều để đa dạng kiến thức hơn chia sẻ tới các em đó. Chứ anh không làm qua loa như nhiều người khác thì mọi chuyện lại dễ rồi =)))
    Cố gắng xem video của anh từ từ cẩn thận nhé. Như câu hỏi hôm nay xem kỹ là hiểu ngay mà. Anh sẽ không viết tin nhắn dài như này nữa đâu nha, hơi đuối rồi =))"
    -----
    👉 Hết rồi đó, chúc các bạn học tập tốt nha! ^^

  • @trungquandev
    @trungquandev  Год назад +3

    🔔Các bạn xem video và nếu hứng thú thì có thể join Discord hoặc group Facebook của mình để cùng nhau chia sẻ thêm nhiều kiến thức bổ ích nhé: 🍀
    🔗Discord: Kiến Thức Lập Trình: discord.gg/ycSbhP6gDu
    🔗Fanpage: Trung Quân DEV: facebook.com/trungquandev
    🔗Group: Cộng đồng Lập Trình Web • Front-end & Back-end Việt Nam: facebook.com/groups/laptrinhwebvietnam

  • @TuanHungDev
    @TuanHungDev 4 месяца назад +2

    Hay qúa anh!

  • @quynh8495
    @quynh8495 2 месяца назад

    cảm ơn về video của anh, rất hay ạ và em thấy khi follow theo cách của họ khi em load lại trang nhanh thì nó vẫn có hiện tượng nháy đen trắng

  • @thanh9957
    @thanh9957 Год назад +2

    Chúc anh sức khỏe nhé, giữ lửa đam mê với nghề, chất lượng bài giảng tuyệt vời a ạ :D

    • @trungquandev
      @trungquandev  Год назад +1

      Cảm ơn comment động lực của em nhé, học tập tốt nha. Và có bạn bè cũng học lập trình thì chia sẻ video này tới bạn để ủng hộ anh với nha ^^

  • @thecatronautt
    @thecatronautt 7 месяцев назад

    Hay quá ủng hộ bạn hihi.

  • @NgocTaik5
    @NgocTaik5 4 месяца назад +1

    Anh ơi cái useColorScheme là nó lưu luôn giá trị mode trong localStorage , thì tức là trong cái theme=extendtheme.... ý ạ, nó cũng sẽ bắt được cái giá trị mode trong cái localStorage đó luôn đúng không anh

  • @qtngaming2024
    @qtngaming2024 8 месяцев назад

    anh ơi trong blog thì làm sao ah

  • @TranNguyen-ou5zo
    @TranNguyen-ou5zo 9 месяцев назад

    ❤❤

  • @Vincentang-sx8ed
    @Vincentang-sx8ed 22 дня назад +1

    Làm sao anh xoá được hết mấy dấu cộng trong 1 lần vậy anh ?

    • @trungquandev
      @trungquandev  21 день назад +1

      Em bôi đen vào một cụm ký tự em muốn, sau đó nhấn Crtl+D (Win) hoặc CMD +D (Mac) để nó tìm những đoạn giống tiếp theo (trong trường hợp em đang hỏi thì nó là dấu cộng). Rồi chỉnh sửa một thể nhé.

    • @Vincentang-sx8ed
      @Vincentang-sx8ed 21 день назад

      @@trungquandev dạ để e thử

  • @TrungNguyen-cf9ry
    @TrungNguyen-cf9ry 11 месяцев назад +2

    cái mà lỗi flickering ấy anh, e làm như a rồi, xong e f5 lại thì nó vẫn chớp sáng 1 cái trắng rồi mới sang đen, e thử trang mui của nó cũng light rồi mới sang dark, vậy có gọi là lỗi không anh

    • @trungquandev
      @trungquandev  11 месяцев назад

      Hiện tại thì cái này không urgent lắm đâu em, để như vậy được rồi, tập trung học tiếp các phần sau quan trọng hơn nha. Có thời gian a sẽ xem lại xem có cách bào làm cho nó mượt hơn không :))

    • @TrungNguyen-cf9ry
      @TrungNguyen-cf9ry 11 месяцев назад

      @@trungquandev dạ anh hihi

  • @3illion844
    @3illion844 Год назад

    trong dự án thực tế thì mình cũng xây Dark Mode & Light Mode lúc đầu phải hông anh

    • @trungquandev
      @trungquandev  Год назад +1

      Khum em ơi =)) Thích xây lúc nào thì xây thôi em, nếu dự án chưa đặt nặng vấn đề Theme này, mà cần một phiên bản nhanh để đưa ra ngoài thị trường thì vẫn có thể bỏ qua nó mà. Sau này khi dự án chạy ổn ổn rồi mở rộng dần các feature thì lúc đó làm cái này cũng chưa muộn nhé.
      - Ví dụ siêu thực tế luôn này: Có một dự án anh đang từng làm mà nó chạy >3 năm rồi, khách bên kia không quan tâm tới vụ dark-light luôn, cái chính là cần các feature cốt lõi để ra tiền đều đều đã :)))

    • @3illion844
      @3illion844 Год назад +1

      dạ ok anh ^^!

  • @devquen7688
    @devquen7688 Год назад +2

    hồi trước em có theo dõi series Trello cũ thì cũng thấy anh tìm ra lỗi ở thư viện dnd-beautiful-react qua các issue trên github. Thông thường anh vào đọc các issue của 1 library khi tìm hiểu công nghệ, hay mình gặp bug r mới tìm anh nhỉ, hiện tại em ch có thói quen vào đọc các issue của nó như anh

    • @trungquandev
      @trungquandev  Год назад +1

      Cả 2 em ạ, tuy nhiên do phong cách của anh thì thường là học qua "thực hành làm dự án thực tế" nên đa phần gặp bug xong đi tìm hiểu thì mới tìm thấy trên stackoverflow hoặc issue của thư viện. Còn đôi khi a đọc tài liệu, anh thấy thắc mắc vấn đề A vấn đề B...vv chẳng hạn, xong anh tìm trên google cũng ra issue để đọc. Chứ mà bảo đọc hết issue của một thư viện (đặc biệt là thư viện lớn) thì gần như là điều không thể nha =))) Trừ khi em đủ nhiệt huyết cống hiến và làm contributor cho một thư viện mà em thích =)))

    • @devquen7688
      @devquen7688 Год назад +1

      @@trungquandev đề tài cách tiếp cận 1 công nghệ/lib mới em thấy khá hay mà rất ít ng chia sẻ, k biết khi rảnh anh làm 1 video về chủ đề này dc k ạ, rất muốn biết góc nhìn của anh^^

    • @trungquandev
      @trungquandev  Год назад +2

      @@devquen7688 oke chốt đơn em nhé, anh sẽ cho vào series Q&A lập trình viên nha :))

  • @DanhZing
    @DanhZing Год назад

    Anh ơi em đang làm MUI với NextJs nhưng mặc dù em đã thêm CssVarsProvider rồi nhưng khi tải lại trang thì nó cũng chuyển qua light mode một lúc đầu rồi sau đó nó mới chuyển light. Cái này mình xử lí sao vậy anh. Em cảm ơn.

    • @trungquandev
      @trungquandev  Год назад +1

      Em xem kỹ cái phân đoạn 30:01 Fix cái vụ Flickering mà anh đánh dấu chưa? Em sẽ cần làm thêm ở mục số 3 trong docs của thư viện đó, nó có hướng dẫn luôn cho NextJS rồi mà, không chỉ mỗi CSSVarsProvider là xong đâu, em để ý vào cái getInitColorSchemeScript nhé.