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:

☕ Buy me a Coffee ☕

Instagram 💪

🔥 My Coding Equipment 🔥

[TrianeP]

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

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

[coreynoble]

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

[onahsunday]

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

[kurwacherry]

thanks man, this was just what i needed

[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" ? <h2>Light Theme</h2> : <h2>Dark Theme</h2>}

{theme === "light" ? (
<i onClick={switchTheme} class="fas fa-toggle-on"></i>
) : (
<i onClick={switchTheme} class="fas fa-toggle-off"></i>
)}

[amacodes]

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

[showcaserv]

This is exactly what I’m looking for 🤯

[mohammedhassan]

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

[ahtidotpk]

That's realy amazing thank you so much

[angshumanpathak]

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

[chadthunder]

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

[userabc]

how to add this is in an ongoing project?

[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, by the way awesome video tutorial !!, and thank you for sharing 😎👍

[g_westside]

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

[anishbishnoixD]

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

[czarscrib]

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

[mahammadmansurali]

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

[azimb]

how do i implementation theme in other page in one button

[showcaserv]

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