[data-theme="dark"] is we add attribute to the body element in our setDarkMode function[at 1:30]: document.querySelector("body").setAttribute('data-theme', 'dark'); [data-theme] is an attribute to know the data of current application theme. If our data-theme="dark", then currently user select dark mode, else user in light mode.❤
See SVGs can be treated like components because they're XML-based, while PNGs and JPGs are static image files that can't be dynamically manipulated in the same way.
Hi sir,actually i am following the course on udemy . I am getting error in the same section while adding darkmode component even after trying same said on tutorial facing same issue unable to resolve can you help ???
I am attempting to use localStorage in a Nextjs environment, but I am getting a "localStorage not defined error". I did some reading and learned it should not work in a Reactjs environment either, yet you are able to. Why is this? Am I missing something? Any help would be greatly appreciated. Thank you so much for your video.
If you are encountering a "localStorage not defined" error, consider the following: Make sure you are using localStorage in the client-side code, not in server-side rendering (SSR) or during the build process. Check if there are any conditional statements or environments that might prevent the code from running on the client side. Confirm that your code is running in the browser environment.
@@CodeBlessYou Thank you so much! I have much to learn regarding the client vs server side rendering, but I greatly appreciate that you've pointed me in the right direction.
After adding folder, You just need to add DarkMode component in your Component in which you want to display. After that you can also modify CSS according to your needs
Sorry Asha, I recently check this DarkMode zip and I uploaded end file at the place of beginner file. You can now download the starter file, that will not give you any error. Sorry for that again
In react, we can't use for attribute because it is reserved keyword in JavaScript (for loop). Same as class and className. So we have to use htmlFor instead of for in label
We get this error because of React Update. First you have to install one package, npm install vite-plugin-svgr@3.2.0 and in your vite.config.js file, you have to add svgr plugin in plugin array. Use this github repository - github.com/pd4d10/vite-plugin-svgr#readme
Currently Working on Complete React JS course which will cover all important concepts with real world projects. You can register for FREE from here: forms.gle/aBtV1aRdcbztDwF3A
I don't have the source code now. Because I think I record this video one year ago. Still I will check my backup. If it is available then I will inform you❤❤
You can use this or you can define state variable and change that state variable on toggle and toggle className for our app component div. You can do it both ways
![Lp. Сердце Вселенной #60 РОЖДЕНИЕ ЛОЛОЛОШКИ [Финал] • Майнкрафт](http://i.ytimg.com/vi/YoR0pAV9FVQ/mqdefault.jpg)
🤩Access My Complete React Course:- www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
this is paid? plz make us free
DM me on Instagram@@figmawithrazib
Omg i swear when i search for a tutorial on youtube, it'll be more helpful if i hear the Indian accent, thank you so much sir
My pleasure❤❤
Very true 👍
When you can apply things you have learned well but if you can explain it to others in the most simpliest way you are a genius!!! Thanks Genius!!
👑
Thank you so much for your compliment. Grateful for that❤❤
Very useful❤❤
❤❤
simple, effective and easy to understand. Thanks a lot
❤❤
Most underrated channel in whole coders community ❣❣❣
Thank you so much for this comment❤❤❤
working. thanks
❤❤❤
This is extremely helpful, thanks a lot man!
Thanks for your support. Really grateful for that❤❤
This was very helpful.
Thank you sooo much :)
❤❤❤
i was not expecting this much information but thanks buddy you have done the best work . i really apreaciate your work 💓
Thank you so much for your support❤❤
❤🎉 Thank You
❤❤❤
Nice logic very helpful ❤
❤❤❤
Nice one....easy one
❤❤❤
This is so simple, thank You!!!
❤❤❤
Thank you!
❤❤❤
Great video and to the point. Thanks a lot!
❤❤
Keep uploading bro 👍
Sure I will
Nice video, also filled up the form.
Thank you so much😇❤
Thanks a lot! New suscriber
Grateful for that❤❤❤
Thank you
❤❤❤
Really helpful man. Thanks a lot!
Thank you for your support brother😇❤❤
A lot of value in this short video
Thanks for your support❤❤
thank you soo much you helped me a lot!!
My pleasure ❤❤
thank you man!
❤❤❤
Great video, thanks
❤❤
Mashallah 😍😍
❤❤❤
Why you are using dom in react?
this is gold
❤❤❤
At 4:25mins ... i have no idea where u got the "[data-theme="dark]" from ?.. and whats "[data-theme]" ?
[data-theme="dark"] is we add attribute to the body element in our setDarkMode function[at 1:30]:
document.querySelector("body").setAttribute('data-theme', 'dark');
[data-theme] is an attribute to know the data of current application theme. If our data-theme="dark", then currently user select dark mode, else user in light mode.❤
Thanks
❤❤❤
Thank you so much for sharing your knowledge, Sir.
Thanks for your support❤❤
TYSM!
❤❤
can you tell us why we need to use ReactComponent for import svg, but we cannot do that with the png or jpg??
Thanks a lot!!!
See SVGs can be treated like components because they're XML-based, while PNGs and JPGs are static image files that can't be dynamically manipulated in the same way.
Hi sir,actually i am following the course on udemy . I am getting error in the same section while adding darkmode component even after trying same said on tutorial facing same issue unable to resolve can you help ???
Yes. Show me the error in the QnA Section of that lesson in which you are getting error. I will try to solve that error
@CodeBlessYou sure sir i will
Can we add 3rd and 4th theme also? Like daisyUI?
Yes you can. But keep in mind, more choice more users gets confused.
how to fix the delay on text changing colors?
remove transition CSS from the style
Hi brother do you have monalisa ttf file as you used in the project can you send it I can use it
It's illegal to share purchased fonts. But you search for that, then you can get that font FREE.
go on my brother
Thanks for your support brother😇❤
I am attempting to use localStorage in a Nextjs environment, but I am getting a "localStorage not defined error". I did some reading and learned it should not work in a Reactjs environment either, yet you are able to. Why is this? Am I missing something? Any help would be greatly appreciated. Thank you so much for your video.
If you are encountering a "localStorage not defined" error, consider the following:
Make sure you are using localStorage in the client-side code, not in server-side rendering (SSR) or during the build process.
Check if there are any conditional statements or environments that might prevent the code from running on the client side.
Confirm that your code is running in the browser environment.
@@CodeBlessYou Thank you so much! I have much to learn regarding the client vs server side rendering, but I greatly appreciate that you've pointed me in the right direction.
@@CodeBlessYou It worked!! You are the best. Thank you, my friend. Just subscribed to your channel!
My pleasure @@nathanielgonzalez9598
Grateful for that brother@@nathanielgonzalez9598
I did everything what you have done , toggle button appears on the screen but colors don't change.What should I do?
Try to inspect CSS, maybe there are some changes
@@CodeBlessYouI solved it , thanks
@@erencetin7805 ❤❤❤
After adding that folder, what are all the changes we need to make in the react folder to make it work?
After adding folder, You just need to add DarkMode component in your Component in which you want to display.
After that you can also modify CSS according to your needs
Sorry Asha, I recently check this DarkMode zip and I uploaded end file at the place of beginner file. You can now download the starter file, that will not give you any error. Sorry for that again
tanks
❤❤❤
excelent!
Thanks for your support❤❤
thank you
❤❤
how can i do this same thing in scss and react
Once you understand the logic of Dark Theme then you can apply it on any thing
I'm getting an error: Warning: Invalid DOM property `for`. Did you mean `htmlFor`?
In react, we can't use for attribute because it is reserved keyword in JavaScript (for loop). Same as class and className. So we have to use htmlFor instead of for in label
I can see that my toggle works but the colours don't change
Try to inspect and check dark attribute is adding or not
i have follow the steps,but i got an error:
Uncaught SyntaxError: import not found: ReactComponent
can you give solution?
We get this error because of React Update.
First you have to install one package, npm install vite-plugin-svgr@3.2.0
and in your vite.config.js file, you have to add svgr plugin in plugin array.
Use this github repository - github.com/pd4d10/vite-plugin-svgr#readme
Good logic
Thanks for your support❤❤
Why my css code don't working?
Check you imported CSS file at the top or not
Vs code font & theme?
AYU MIRAGE
Hi Bro,
kindly make a video in React Js bro
Your Videos make easy to learn react
ASAP make video in react
thanks a lot
Currently Working on Complete React JS course which will cover all important concepts with real world projects. You can register for FREE from here: forms.gle/aBtV1aRdcbztDwF3A
can you provide whole code plzzzz
I don't have the source code now. Because I think I record this video one year ago. Still I will check my backup. If it is available then I will inform you❤❤
@@CodeBlessYou ok thanks
where is source code......
When you set the dark theme attribute on the body, aren’t we not supposed to directly change DOM elements when working with React?
You can use this or you can define state variable and change that state variable on toggle and toggle className for our app component div. You can do it both ways
Using querySelector in a react app doesn't look good to me. There should be a better way of doing that.
I will upload the update version on this Video :)
How to toggle data-bs-theme="dark" to data-bs-theme="light" in new Bootstrap 5.3
My Content
Hello sir i m very poor and unable to pay for your react paid course can you please provide me for free your react course .plz plz sirr😢
Contact me on Instagram, When I create coupon for React Course I will give you FREE❤❤❤
@@CodeBlessYou thank you so much sir
@@babar178 Here is the FREE Access - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?couponCode=FF4E7D5CD87487F51D26
Nice solution but you don’t use react with states or context and your way is a bit difficult to unterstand
Yes It is Vanilla JavaScript and React also build on Vanilla JavaScript. Thanks for your support. Really grateful for that😀❤❤