Tailwind CSS Dark Mode | React App Theme Switcher

In this short video, I'll show you how to use Tailwind CSS Dark Mode to improve the look and feel of your React app. We'll also discuss how to use Tailwind's Theme Switcher to change the theme of your app with just a few clicks!
Tailwind is a powerful CSS framework that includes Dark Mode support. This video will show you how to use Tailwind's Dark Mode to improve the look and feel of your React app. We'll also discuss how to use Tailwind's Theme Switcher to change the theme of your app with just a few clicks!
-----------------------------------------------------------------------------------------------------
This video will also explain to you how you can set it up to check for the browser's default preferred scheme and apply the color according to the settings.
💻 GitHub for this project - github.com/Azm...
-----------------------------------------------------------------------------------------------------
Music Credits :
Song: Fredji - Happy Life (Vlog No Copyright Music)
Music provided by Vlog No Copyright Music.
Video Link: • Fredji - Happy Life (V...

[@tanvirramim3647]

but there is problem , when i switched dark mode from light and later on if do refresh it will go back to light mode again , how can resolve this problem

[@ShamilKP-r2n]

Did you find solution I think storing theme dark or light on localstorage fix this 😊

[@pupil_1]

but there is problem , when i switched dark mode from light and later on if do refresh it will go back to light mode again , how can resolve this problem

[@Angalic666]

use setLocalStroage() to store the preivous theme value in browser local storage.

[@евгешааксентьев]

Save current theme in localStorage

[@usamamohiuddin7904]

This doesnt work for me and the code is not doing anything

[@nikolavaniscakova4367]

if even if I went step by step it doesn't work

[@NorgeSantana]

Awesome guide, after searching around this is the best one I found. Simple and efective!

[@bestchoice7431]

When refresh the page the darkmode will be gone. Not a great video for the production.

[@flojd2232]

just store it in local storage

[@roddrickanummartey8749]

Thanks. You are great☺

[@GhanayemOmar]

Good,
But its too hard to apply the dark theme on each element in the app,
Its should be more reusable way to do that ..

[@RealOverClocked]

This button will actually trigger all the dark elements with className: “dark:” you have to within the site.
I think the other approach would be to add it app/index.css file and use @apply if you want it all over the site.

[@ShubhamChadokar-k7b]

background music is irritating

[@libertarianted2077]

how can I add a transition to the theme switch

[@angshumanpathak2300]

Can you guys tell me one thing I have an image in my head.js folder and I have a particular Darkmode component that has a theme state and thus what i want is that in my head.js folder I want to change my logo to a white one whenever my theme state changes to dark

[@RichReflectionz]

This has been easy to follow and made integration easier, unless I didn’t read the docs correctly to get it to work, the example you provided with hooks definitely helped.

[@GDSKS]

Good Video

[@rayhanalkavey1820]

Valuable content like this will help us both to grow.

[@vibhourrr]

Most simplified video you'll find on RUclips on 'Dark mode in Tailwind, react'

[@Rapunzel-mo9ur]

Its's a very easy and effective way to toggle dark/light theme with an exceptional explanation. 🎉😊

[@smartstar4131]

That was super easy and straightforward. Thank you!

[@nadeemsymun2196]

it's best one i hope. And also need use toggle icon in this dark mode. please help me

[@felistusmbesa4053]

Thanks buddy😊, your tutorial came through when i needed it

[@anangyoga1381]

hi man, thank you it short, simple, and most importantly, works!

[@muonyeluchinedu5454]

Thanks for the guide.

[@Vivi-Price]

This was exactly what I needed! Thank you for this video! 😊

[@ader1473]

Thank you sooo much.. so short and simple

[@christianmiguellicudanilov220]

thank you thank you thank you for this

[@whatever.username]

it works! thanks a bunch!!!

[@hooho491]

Thank you so much

[@anikaibnathaque5700]

damn this was helpful. thanks!

[@mohamedyoussef8835]

Awesome tutorial +++++++++++++++++ 🙂

[@afrinsadia152]

Clear Explaination , Thank You :)

[@camilobautista6468]

Thank you very much!

[@alisonoz7219]

great video! thank you!

[@vutran1160]

nice explaination , easy to understand , thanks

[@itsmoh4med]

thanks mate

[@RadoslavRobert]

Most concise and good tutorial about dark mode.

[@ilyaivanteev172]

Beautiful

[@mohdsiddiqulhaque4486]

Will it toggle the class in all the components ??

[@RealOverClocked]

Yes, entire website.

[@juicio_den]

Awesome

[@techno_talis]

How to i get this type of terminal that you use?

[@RealOverClocked]

I'm using an app called Hyper JS from - hyper.is/ and there are many tutorials on how you could set it up with the color and fonts the way you want.

[@bayezidmostafa3364]

Thanks a lot for helping me out!

[@RealOverClocked]

I’m glad that it helped!

[@S20N01]

what ide is that?

[@RealOverClocked]

VSCode with Material Theme!