Dark Theme Toggle - React JS - Switch From Light Theme To Dark Theme - Beginner Tutorial

In this React JS video I demonstrate how you can easily setup a toggle button to switch from a "light theme" to a "dark theme". The video is a bit drawn out since I design a login from from scratch. You can follow along step by step as we build this login form or you can easily implement this in your own project! I hope you like this one - make sure to like and subscribe for more coding tutorials. If you have any questions or input then please drop it in the comments section!
Also, I believe I mentioned "sessions", but I was actually referring to local storage so go easy on me! :)
Github:
github.com/fir...
☕ Buy me a Coffee ☕
www.buymeacoff...
Instagram 💪
/ fireclint
🔥 My Coding Equipment 🔥
Logitech MX Wireless Keyboard - amzn.to/3xKPFiN
Logitech MX Master 2S Wireless Mouse - amzn.to/3O5WmRD
SAMSUNG 49-Inch Gaming Monitor - amzn.to/3mvUy8M
Shure MV7 USB Podcast Microphone - amzn.to/3O00nqG
Mic Boom Arm - amzn.to/3NHn6YU
Monitor Desk Light Bar - amzn.to/3xzKlyj

[@onahsunday6417]

I have seen several videos but this is Exactly what I am looking for thanks dude.

[@codecommerce]

Onah, thank you dude!

[@abedalraoufzeidan1461]

your tutorials are awosome

[@codecommerce]

thank you sir!

[@angshumanpathak2300]

Hey can you explain me one thing how did the small icons changed into white onclick of the dark mode

[@mohammedhassan8942]

bro if you keep up with type of unique content you surely gain more subs

[@codecommerce]

Thanks my dude!

[@StachaC]

Thank you for the amazing tutorial! You just forgot to change the "Light Theme" heading and the toggle. This code worked for me:
{theme === "light" ? Light Theme : Dark Theme}
{theme === "light" ? (
) : (
)}

[@codecommerce]

Thank you shakeel

[@daze_music]

Damn my dude, that's like insanely easier then most of how people use the theme toggler trend. That was very informative and accurate. Thanks so much.

[@codecommerce]

Thanks dude - glad you liked it!

[@TrianeP]

I enjoy how excited you are when speaking about this. Great video

[@codecommerce]

Thank you!

[@miirshe]

Thanks less code more efficient and so easy I` excited to be teach me (UseLocaalStorage)

[@userabc200]

how to add this is in an ongoing project?

[@kurwacherry]

thanks man, this was just what i needed

[@coreynoble8532]

Thank you, spent way too much time trying to figure this out using other resources. This was simple and makes a tonne of sense.
One suggestion. Either already have the markup in-place, or have bookmarks pointing to the actual implementation of the theme variables / context switch

[@codecommerce]

Thank you Corey

[@chadthunder6973]

How can this toggle be applied from another component? Say a navbar component instead of in the App where data-theme is defined.

[@g_69westside51]

on 25:56 can someone explain to me whats the meaning of the conditional statements on line 8 and 11 .Thankyou

[@illusry7631]

24:10 the javascript

[@aymenbachiri-yh2hd]

thank you

[@anishbishnoi29xD]

u r awesome ♥️ Keep it up . MERN STACK Will be great. ♥️

[@showcaserv4209]

This is exactly what I’m looking for 🤯

[@sarafkaushik4745]

thank you nice explanation

[@mahammadmansurali1099]

Make a video on react-redux with using api...please

[@codecommerce]

Thats a great idea!

[@vignesh-xb5uz]

Nice work.....pls continue do this work 🇮🇳❣️

[@codecommerce]

Thanks!

[@ahmedal-amodi]

I like your way, simple and easy 👏

[@GauravSingh-bc1ug]

best method ever seen

[@czarscrib3680]

Bro what's your internet speed 😩 plus how did that install so quickly

[@codecommerce]

Sup dude! We have 1gig up/down here :)

[@czarscrib3680]

@@codecommerce 😯

[@HaNaxHeart]

thank you so much !!

[@ahtidotpk]

That's realy amazing thank you so much

[@codecommerce]

I'm glad you like it man!

[@amacodes7347]

Great content really loved it and the explanation was absolutely awesone. I was thinking of instead making the dark theme as a component to be used on other pages

[@codecommerce]

That's a great idea!

[@azimb2280]

how do i implementation theme in other page in one button

[@codecommerce]

Azim - I'm actually doing another dark theme toggle using context

[@gajananmehta7215]

amazing👍

[@romimaximus]

Hey i have a question ?, at 12:00, whats that "[data-theme='dark']{ }" came from ?.. and at 25:00, 'dark' and 'light', where's the 'light' theme ? , cause i see the 'dark theme' you that you created in the css earlier, but i dont see the 'light' theme ? ...im lost here, kkkkk, by the way awesome video tutorial !! , and thank you for sharing 😎👍

[@akamaru1822]

`data-theme` is an HTML attribute he assigns at @26:00. He sets the value of the `data-theme` attribute to be equal to that of the `theme` hook. The `theme` hook on initiation ( `App.js` Line 8) is checking if there's a local session with the name `theme`, if not found then assign the value of the `theme` hook` to equal 'light'. From there the theme-toggle button is flipping through these and setting the value of the theme variable to `light` or `dark`, this value is saved to the local storage so that the next time you visit the page there'll be a value for that 'theme' local storage.
One thing that is confusing is the way the useLocalStorage hook is instantiated. You can check the usage by looking for `use-local-storage` npm package. It should be instantiated like so,
useLocalStorage("name", "value");
In our case, name=theme, value=light

[@romimaximus]

@@akamaru1822 awsome, thankx for the reply, im more confused about the 'light' theme, cause i dont see any css rules setup for this 'light' theme, anyway thankx, you cleared out most of my doubts 👍

[@akamaru1822]

​@@romimaximus np. The 'light' theme is nothing more the variables set in the `:root` at 12:35. basically we are adding the 'data-theme='dark'' attribute to then override the variables set in the ':root' with that in `[data-theme='dark']`.
On the first page visit, we set
`useLocalStorage("theme", "light")` // as there is no local storage with the key 'theme;
The css variables in ':root' are instantiated, this is our `light` theme.
When we toggle the theme, light to dark:
Setting `theme` to "dark" (on first toggle)
This causes a page re-render as we set `data-theme={theme}` , data-theme attribute determines which css theme to use.
Now, since `[data-theme='dark']`
we override the CSS variables we declared in `:root` with those in `[data-theme='dark']`
If you look at the index.css file, you can see that ':root' and `[dark-theme='dark']` are an inverse of each other, hence light and dark themes

[@romimaximus]

@@akamaru1822 well thank you very much for your help and reply...i really apreciate 😎👍

[@codecommerce]

Thank you for the clarification John

[@samcuber4364]

Thank you soo much for this!!

[@codecommerce]

You're so welcome!

[@sifact1391]

So simple and elegant

[@codecommerce]

Thanks!

[@kenansari]

thank you

[@codecommerce]

You're welcome

[@xidnebwoz]

How about react authentication?

[@showcaserv4209]

That’s a good idea! Really wish i could afford a database.

[@codecommerce]

Absolutely - a MERN video sounds fun.

[@showcaserv4209]

I noticed that the circle is not moving, how do I make it move onclick?

[@codecommerce]

Hi! Yes- that is just a static icon so there will be no change.
Two options here:
Option 1 - (and in my opinion the easiest way) would be to add the identical react-icon that is reversed. Then add a function to toggle between the two icons. Much like how we do for the hamburger menu.
Option 2 - We could code a custom button in CSS.

[@showcaserv4209]

@@codecommerce thanks