The Best Way to Handle Dark Mode with TailwindCSS

preview_player
Показать описание

Theming your website, wether just to allow light and dark mode, or even to allow full customization of the look and feel for your users, is a great (and often expected) way to increase user experience.

Today we'll take a look at how we can achieve this in TailwindCSS utilizing CSS variables. We'll use ReactJS for our example, but everything will apply exactly the same for HTML, CSS & JS, Svelte, Vue, or any other framework.

📚 Project Links

🔗 My Links

0:00 - Intro to theming in TailwindCSS
0:36 - Defining colors in your tailwind config
0:56 - Using CSS variables
1:41 - Refactor our example
2:05 - Adding more themes
2:44 - Switching themes based on OS preferences & more
Рекомендации по теме
Комментарии
Автор

got a headache watching videos on this topic for hours understanding nothing, very clear and straight to the point🔥

Alipakdamanyt
Автор

Very very cool!! I love how you explain things! No faff just straight to exactly what’s needed! 👏👏✨

BooksWeCanRead
Автор

Awesome videos and components pack, thanks for all the great content!

piotrdarnowski
Автор

so useful stuff in such a short video <3 loved this!!

rog
Автор

wow that is explained so well and straight to the point, hoping you have a full on course coming out soon ...

digitalsahara
Автор

Wow never thought this would be this easy TT, thankyou very much

xiaodhruv
Автор

This is the best video on topic. I'm using next js so I'll try to do the same but to use cookies instead of local storage

ohskynyrdlynyrd
Автор

I watched this video long ago, I though I saw this in instagram 😅, but I finally founded here hehe

DMZT_dhruv
Автор

This is the easy bit...! The challenge is getting colour palettes that work well together and using the right colours in the right places... It gets _really_ confusing!

redders
Автор

the only problem with this is that we can't see the small previewed colour in the class name

sofyanox
Автор

What is the website he is at the beginning when switching themes

isaacgarcia
Автор

So Good, that I wanna recreate this 🤧

whyyshivam
Автор

if u use this
primary: 'rgba(var(--color-primary), <alpha-value>)',
than opacity will work

feelsthevibes
Автор

Can you please tell which vs code theme you are using?

sravanstg
Автор

How to get the rgba numbers for dark theme and light theme like you have is there any website ?
By the way awesome video ❤👌

NitinKumar-jcbg
Автор

What about colors with intensity? Like blue-400 ?

amirreza
Автор

How simple and useful. Thank you very much for this

Ancode