Light Dark Mode React - Without Any Libraries

[@MonsterlessonsAcademy]

WATCH NEXT: React Interview Questions and Answers - Dominate Your Next Interview - kzbin.info/www/bejne/r4Kro2elpd-ShJIsi=51b2XP_84GH3q6oF

[@prateek4279]

would have taken me a whole lot of time doing it by myself :( so thanks for your help !!keep up the good work:)

[@MonsterlessonsAcademy]

Glad I could help!

[@walassi834]

how could you show us this much content in 14 minutes. this was incredible!

[@MonsterlessonsAcademy]

Magic!

[@EleceG]

Really nice and clear code, Thank you for sharing this :)

[@MonsterlessonsAcademy]

You're welcome!

[@computerscience1152]

Interesting tuturiol, Awesome... Subscribed

[@MonsterlessonsAcademy]

Thanks for the sub!

[@unknownrus920]

Interesting approach, but 1 question, isnt it easier to have in index css on body a set of color variables and just rewrite them with darktheme class and its color values. darktheme class is added on the body via some kind of a toggler

[@MonsterlessonsAcademy]

The main problem with your approach is that css and color variable are not usable inside js. Which means we can't write logic, conditions, etc with them. Here are can do that because it's in js.Theme is not only colors, it can be margins, paddings, sizes, booleans, etc. P.S. But if you just have several global variables your approach may be easier.

[@dhavaljprasad]

I understood the video, but what if i don't want to use style attribute for my tags, instead I want it to use in custom styled component file. How we can do that ? Please, I'm stuck on this, and I really want to get this done. Any suggestions or help ?

[@MonsterlessonsAcademy]

You can store just theme name and render different components depending on the them. Or provide different props to styled comp.

[@samarosman7110]

The video was amazing man!🎉 Thank a lot. Could you make a video to show how to create multi language app using React Context, please?

[@MonsterlessonsAcademy]

I will add your idea in the list of future videos

[@sd-kg8tq]

Thanks for the video. Really helped me with my react project.

[@MonsterlessonsAcademy]

Great to hear!

[@alexanderborisov1828]

Great usage of context. It is a nice video to start with and expand further according to your needs. By the way, it is better to use "useLayoutEffect hook" instead of "useEffect hook". Because your current implementation causes CSS flickering while the page is being reloaded.

[@MonsterlessonsAcademy]

Yes, you are totally right!

[@sd-kg8tq]

Thanks for that. Saved me time to start looking for a solution. Works great.

[@tanushridas8264]

Thanks brother

[@MonsterlessonsAcademy]

You are welcome!

[@YaroslavEx]

дякую!

[@denver3583]

how we can add multiple style on one theme mode? I am trying but it is not working at all, Please help :(

[@mehdijafarzade2381]

awesome bro

[@MonsterlessonsAcademy]

thanks

[@pro-cr2eo]

amazing! Thanks for the video.

[@MonsterlessonsAcademy]

Glad you liked it!

[@jixster1566]

How do you do this for more than 2 themes

[@MonsterlessonsAcademy]

Store not boolean but a string with theme name.

[@katarina4tiaotiao]

I didn't know react could do this!

[@MonsterlessonsAcademy]

Something new every day :)

[@gigakvachakhia4777]

interesting video as always.

[@MonsterlessonsAcademy]

Glad you enjoyed it

[@workmoneyworkmoney]

This is more complicated than vanilla javascript XD

[@MonsterlessonsAcademy]

Sure but it is difficult to build big production apps with vanilla

[@eduardstransky7722]

This tutorial is very basic. It can be applied on 1% of basic sites. Try toggle an app between 2 bootstrap themes light and dark, and you will see what i am saying. There will be the flicker on switch. And other problems. You will need a script tag before react initialize to block react and get the browser selected theme and from there the things get complicated if you have autentification... get user preferences from db .. light,dark, or no selection ... from there to put in localstorage.. and so on. This tutorial is 1% of what must be done.

[@MonsterlessonsAcademy]

Well, yes. it was never intended to be a fully featured production solution with all possible cases :)