The Best Way to Handle Dark Mode with TailwindCSS

Animated UI components for React, Tailwind CSS, Framer Motion & More ✨ www.hover.dev
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
Source: github.com/TomIsLoading/tailw...
🔗 My Links
TikTok: / tomisloading
Instagram: / tomisloading
GitHub: github.com/TomIsLoading
Twitter: / tomisloading
Discord & more: linktr.ee/tomisloading
Portfolio templates: tomisloading.gumroad.com/
Website: www.hover.dev
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

[@Alipakdamany]

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

[@BooksWeCanRead]

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

[@rog0079]

so useful stuff in such a short video

[@tomisloading]

Thank you!! :D

[@xiaodhruv7693]

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

[@ricardocnn]

Awesome approach!

[@digitalsahara6670]

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

[@tomisloading]

I will absolutely do a full length tailwind vid soon :)

[@mohamedyamani8502]

Pretty cool man! Great video.

[@tomisloading]

Thank you!! 😁

[@joshuaheathcote2116]

Thank you Tom

[@madie2659]

Loved it thanks

[@tomisloading]

Happy i can help! :)

[@redders6600]

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!

[@tomisloading]

Funny enough, I’m building a free tool to help with this literally right now 😂😂 there’s a few good ones (Real Time Colors by Juxtopposed is awesome) but I’m building something a bit simpler and more developer focused 😁

[@whyyshivam]

So Good, that I wanna recreate this 🤧

[@yaronp16]

thanks you helped a lot!

[@tomisloading]

Happy I could help :)

[@raybelmo]

Cool!

[@DMZT_dhruv]

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

[@user-vp5wr2tx9i]

You're a fucking legend.

[@tomisloading]

😎

[@feelsthevibes1662]

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

[@NitinKumar-jc7bg]

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

[@tomisloading]

So for this video, I just grabbed some colors from the tailwind site :)
There's a bunch of different color generators out there, and I'm actually building my own right now haha. If you check back in a week or so on my site you should see that :)

[@LulsegedAdmasu]

wow

[@amirreza3638]

What about colors with intensity? Like blue-400 ?

[@Ancode2]

How simple and useful. Thank you very much for this