Dark Theme React Application [Simplest Way] | Toggle Theme React Tutorial😍

[@CodeBlessYou]

🤩Access My Complete React Course:- www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD

[@figmawithrazib]

this is paid? plz make us free

[@CodeBlessYou]

DM me on Instagram@@figmawithrazib

[@thosan3090]

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

[@CodeBlessYou]

My pleasure❤❤

[@ebenezerowusu1680]

Very true 👍

[@sohampathak8173]

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!! 👑

[@CodeBlessYou]

Thank you so much for your compliment. Grateful for that❤❤

[@SachinKumar-x9r6k]

Most underrated channel in whole coders community ❣❣❣

[@CodeBlessYou]

Thank you so much for this comment❤❤❤

[@thesankharoy]

simple, effective and easy to understand. Thanks a lot

[@CodeBlessYou]

❤❤

[@zeeshanali4502]

i was not expecting this much information but thanks buddy you have done the best work . i really apreaciate your work 💓

[@CodeBlessYou]

Thank you so much for your support❤❤

[@arhampersonal]

Very useful❤❤

[@CodeBlessYou]

❤❤

[@carldjovan]

This was very helpful. Thank you sooo much :)

[@CodeBlessYou]

❤❤❤

[@ojukwudavid3247]

This is extremely helpful, thanks a lot man!

[@CodeBlessYou]

Thanks for your support. Really grateful for that❤❤

[@МаксимСоловьев-с9н]

This is so simple, thank You!!!

[@CodeBlessYou]

❤❤❤

[@introvert077]

working. thanks

[@CodeBlessYou]

❤❤❤

[@dipankarbarman5307]

Nice logic very helpful ❤

[@CodeBlessYou]

❤❤❤

[@surajbera865]

Nice video, also filled up the form.

[@CodeBlessYou]

Thank you so much😇❤

[@Karp22_]

Thanks a lot! New suscriber

[@CodeBlessYou]

Grateful for that❤❤❤

[@romimaximus]

At 4:25mins ... i have no idea where u got the "[data-theme="dark]" from ?.. and whats "[data-theme]" ?

[@CodeBlessYou]

[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.❤

[@ruthra5398]

Nice one....easy one

[@CodeBlessYou]

❤❤❤

[@gladiatorx77]

Really helpful man. Thanks a lot!

[@CodeBlessYou]

Thank you for your support brother😇❤❤

[@publicshortsviral]

Keep uploading bro 👍

[@CodeBlessYou]

Sure I will

[@peterwong246]

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

[@CodeBlessYou]

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.

[@MrBumbo90]

Great video and to the point. Thanks a lot!

[@CodeBlessYou]

❤❤

[@LuisRodriguez-ro5py]

A lot of value in this short video

[@CodeBlessYou]

Thanks for your support❤❤

[@uminhtetoo]

Thank you so much for sharing your knowledge, Sir.

[@CodeBlessYou]

Thanks for your support❤❤

[@paf_developpement]

❤🎉 Thank You

[@CodeBlessYou]

❤❤❤

[@wesalahmed-pl3mj]

thank you soo much you helped me a lot!!

[@CodeBlessYou]

My pleasure ❤❤

[@hottvomit]

Great video, thanks

[@CodeBlessYou]

❤❤

[@nathanielgonzalez9598]

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.

[@CodeBlessYou]

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.

[@nathanielgonzalez9598]

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

[@nathanielgonzalez9598]

@@CodeBlessYou It worked!! You are the best. Thank you, my friend. Just subscribed to your channel!

[@CodeBlessYou]

My pleasure @@nathanielgonzalez9598

[@CodeBlessYou]

Grateful for that brother@@nathanielgonzalez9598

[@waqasalam_007]

Why you are using dom in react?

[@kimhwanhoon]

thank you man!

[@CodeBlessYou]

❤❤❤

[@YounusFoysal]

Thank you

[@CodeBlessYou]

❤❤❤

[@ewweeewewweweewwe]

Thank you!

[@CodeBlessYou]

❤❤❤

[@asha8201]

After adding that folder, what are all the changes we need to make in the react folder to make it work?

[@CodeBlessYou]

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

[@CodeBlessYou]

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

[@All365_Khaladunnabi]

Thanks

[@CodeBlessYou]

❤❤❤

[@Saivivek-l4c]

Hi brother do you have monalisa ttf file as you used in the project can you send it I can use it

[@CodeBlessYou]

It's illegal to share purchased fonts. But you search for that, then you can get that font FREE.

[@sakibulhasan6345]

this is gold

[@CodeBlessYou]

❤❤❤

[@erencetin7805]

I did everything what you have done , toggle button appears on the screen but colors don't change.What should I do?

[@CodeBlessYou]

Try to inspect CSS, maybe there are some changes

[@erencetin7805]

​@@CodeBlessYouI solved it , thanks

[@CodeBlessYou]

@@erencetin7805 ❤❤❤

[@bijoy3369]

Can we add 3rd and 4th theme also? Like daisyUI?

[@CodeBlessYou]

Yes you can. But keep in mind, more choice more users gets confused.

[@mhhamzaedits]

Mashallah 😍😍

[@CodeBlessYou]

❤❤❤

[@hamidmammadli6360]

go on my brother

[@CodeBlessYou]

Thanks for your support brother😇❤

[@SuperMBARutgers2013]

I'm getting an error: Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

[@CodeBlessYou]

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

[@suryapasupuleti60]

how to fix the delay on text changing colors?

[@CodeBlessYou]

remove transition CSS from the style

[@danielparinding1108]

i have follow the steps,but i got an error: Uncaught SyntaxError: import not found: ReactComponent can you give solution?

[@CodeBlessYou]

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

[@muhammadrifqy24]

TYSM!

[@CodeBlessYou]

❤❤

[@mehrdadsadeghizadeh3219]

tanks

[@CodeBlessYou]

❤❤❤

[@shubhamjangid5936]

how can i do this same thing in scss and react

[@CodeBlessYou]

Once you understand the logic of Dark Theme then you can apply it on any thing

[@RajeshKumar-xx8ey]

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

[@CodeBlessYou]

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

[@harshafly]

thank you

[@CodeBlessYou]

❤❤

[@rasulgold5466]

Why my css code don't working?

[@CodeBlessYou]

Check you imported CSS file at the top or not

[@acm1ptmiamor]

excelent!

[@CodeBlessYou]

Thanks for your support❤❤

[@philipokorie5556]

I can see that my toggle works but the colours don't change

[@CodeBlessYou]

Try to inspect and check dark attribute is adding or not

[@ishansaxena827]

How to toggle data-bs-theme="dark" to data-bs-theme="light" in new Bootstrap 5.3 My Content

[@brandonbh04]

When you set the dark theme attribute on the body, aren’t we not supposed to directly change DOM elements when working with React?

[@CodeBlessYou]

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

[@jeff_yss]

Good logic

[@CodeBlessYou]

Thanks for your support❤❤

[@saim4556]

where is source code......

[@adarsh-chakraborty]

Vs code font & theme?

[@CodeBlessYou]

AYU MIRAGE

[@ivan4486]

Using querySelector in a react app doesn't look good to me. There should be a better way of doing that.

[@CodeBlessYou]

I will upload the update version on this Video :)

[@okkillerkd]

can you provide whole code plzzzz

[@CodeBlessYou]

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

[@okkillerkd]

@@CodeBlessYou ok thanks

[@babar178]

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😢

[@CodeBlessYou]

Contact me on Instagram, When I create coupon for React Course I will give you FREE❤❤❤

[@babar178]

@@CodeBlessYou thank you so much sir

[@CodeBlessYou]

@@babar178 Here is the FREE Access - www.udemy.com/course/the-ultimate-react-course-2023-w-real-world-projects/?couponCode=FF4E7D5CD87487F51D26

[@vaswna14]

Nice solution but you don’t use react with states or context and your way is a bit difficult to unterstand

[@CodeBlessYou]

Yes It is Vanilla JavaScript and React also build on Vanilla JavaScript. Thanks for your support. Really grateful for that😀❤❤