Tailwind CSS Dark Mode | React App Theme Switcher

  • Опубликовано: Год назад

    Over ClockedOver Clocked
    подписчиков: 123

    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/AzmSurov/tailwind-...
    -----------------------------------------------------------------------------------------------------
    Music Credits :
    Song: Fredji - Happy Life (Vlog No Copyright Music)
    Music provided by Vlog No Copyright Music.
    Video Link: • Fredji - Happy Life (V...

@Rapunzel-mo9ur
@Rapunzel-mo9ur

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

4 дня назад
@NorgeSantana +1
@NorgeSantana

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

Год назад
@RichReflectionz +1
@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.

11 месяцев назад
@RadoslavRobert
@RadoslavRobert

Most concise and good tutorial about dark mode.

8 месяцев назад
@felistusmbesa4053
@felistusmbesa4053

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

4 месяца назад
@whatever.username
@whatever.username

it works! thanks a bunch!!!

Месяц назад
@Vivi-Price
@Vivi-Price

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

7 месяцев назад
@rayhanalkavey1820
@rayhanalkavey1820

Valuable content like this will help us both to grow.

Год назад
@tanvirramim3647 +1
@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

4 месяца назад
@anangyoga1381
@anangyoga1381

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

8 месяцев назад
@ader1473
@ader1473

Thank you sooo much.. so short and simple

5 месяцев назад
@hooho491
@hooho491

Thank you so much

2 месяца назад
@afrinsadia152
@afrinsadia152

Clear Explaination , Thank You :)

Год назад
@alisonoz7219
@alisonoz7219

great video! thank you!

Год назад
@angshumanpathak2300
@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

5 месяцев назад
@vutran1160
@vutran1160

nice explaination , easy to understand , thanks

Год назад
@anikaibnathaque5700
@anikaibnathaque5700

damn this was helpful. thanks!

Год назад
@ilyaivanteev172
@ilyaivanteev172

Beautiful

3 месяца назад
@christianmiguellicudanilov220
@christianmiguellicudanilov220

thank you thank you thank you for this

8 месяцев назад
@libertarianted2077 +1
@libertarianted2077

how can I add a transition to the theme switch

6 месяцев назад
@bayezidmostafa3364
@bayezidmostafa3364

Thanks a lot for helping me out!

Год назад
@RealOverClocked
@RealOverClocked

I’m glad that it helped!

Год назад
@GDSKS +1
@GDSKS

Good Video

Год назад
@camilobautista6468
@camilobautista6468

Thank you very much!

Год назад
@itsmoh4med
@itsmoh4med

thanks mate

8 месяцев назад
@nadeemsymun2196
@nadeemsymun2196

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

Год назад
@vibhourrr
@vibhourrr

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

4 месяца назад
@juicio_den
@juicio_den

Awesome

10 месяцев назад
@usamamohiuddin7904 +1
@usamamohiuddin7904

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

7 месяцев назад
@mohamedyoussef8835
@mohamedyoussef8835

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

11 месяцев назад
@mohdsiddiqulhaque4486
@mohdsiddiqulhaque4486

Will it toggle the class in all the components ??

6 месяцев назад
@RealOverClocked
@RealOverClocked

Yes, entire website.

6 месяцев назад
@techno_talis
@techno_talis

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

Год назад
@RealOverClocked
@RealOverClocked

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

Год назад
@omarghanayem6749 +2
@omarghanayem6749

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

7 месяцев назад
@RealOverClocked
@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.

7 месяцев назад
@S20N01
@S20N01

what ide is that?

Год назад
@RealOverClocked
@RealOverClocked

VSCode with Material Theme!

Год назад
@pupil_1 +1
@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

5 месяцев назад
@Angalic667
@Angalic667

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

5 месяцев назад
@user-vy1dh6re2z
@user-vy1dh6re2z

Save current theme in localStorage

Месяц назад

Далее

Dark mode with TailwindCSS in under 7 minutes

6:58

Dark mode with TailwindCSS in under 7 minutes

Built With Code

Просмотров 10 тыс.

You’re doing dark mode wrong!

7:54

You’re doing dark mode wrong!

Coding in Public

Просмотров 30 тыс.

Фальшивая вера Путина

06:24

Фальшивая вера Путина

Алексей Навальный

Просмотров 2,1 млн

Заказ в пути.

00:26

Заказ в пути.

Edward Bil

Просмотров 145 тыс.

Wow! Amazing gadget to crack an egg 🥚 #shorts

00:24

Wow! Amazing gadget to crack an egg 🥚 #shorts

Deserved to be served

Просмотров 908 тыс.

React JS & Tailwind CSS Responsive Website - Beginner Friendly

1:18:16

React JS & Tailwind CSS Responsive Website - Beginner Friendly

Code Commerce

Просмотров 220 тыс.

Next.js Dark Mode with No Flicker + Tailwind CSS

9:43

Next.js Dark Mode with No Flicker + Tailwind CSS

Dave Gray

Просмотров 10 тыс.

This React UI Library is GAME CHANGER!

18:13

This React UI Library is GAME CHANGER!

developedbyed

Просмотров 485 тыс.

Add Dark Mode to YOUR website with a single line of code

4:51

Add Dark Mode to YOUR website with a single line of code

Bufferhead

Просмотров 41 тыс.

Dark Theme in NextJs 13 - Using React Context in Server Components

19:56

10 Tailwind Tricks You NEED To Know!

10:45

10 Tailwind Tricks You NEED To Know!

Ravi - Perfect Base

Просмотров 223 тыс.

Build any layout with tailwind | crash course

34:28

Build any layout with tailwind | crash course

Hitesh Choudhary

Просмотров 12 тыс.

Let's Build a Light/Dark Mode Toggle with Tailwind and Next.js

12:32

Фальшивая вера Путина

06:24

Фальшивая вера Путина

Алексей Навальный

Просмотров 2,1 млн