The Best Way to Handle Dark Mode with TailwindCSS

Рет қаралды 13,627

Күн бұрын

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

Пікірлер: 28

@Alipakdamany 5 ай бұрын

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

@BooksWeCanRead 6 ай бұрын

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

@xiaodhruv7693 6 ай бұрын

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

@rog0079 6 ай бұрын

so useful stuff in such a short video

@tomisloading 6 ай бұрын

Thank you!! :D

@ricardocnn 6 ай бұрын

Awesome approach!

@digitalsahara6670 6 ай бұрын

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

@tomisloading 6 ай бұрын

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

@whyyshivam Ай бұрын

So Good, that I wanna recreate this 🤧

@joshuaheathcote2116 4 ай бұрын

Thank you Tom

@redders6600 6 ай бұрын

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 6 ай бұрын

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 😁

@mohamedyamani8502 6 ай бұрын

Pretty cool man! Great video.

@tomisloading 6 ай бұрын

Thank you!! 😁

@Blade_Dhruv 5 ай бұрын

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

@madie2659 6 ай бұрын

Loved it thanks

@tomisloading 6 ай бұрын

Happy i can help! :)

@raybelmo 3 ай бұрын

Cool!

@yaronp16 5 ай бұрын

thanks you helped a lot!

@tomisloading 5 ай бұрын

Happy I could help :)

@user-vp5wr2tx9i 25 күн бұрын

You're a fucking legend.

@tomisloading 24 күн бұрын

😎

@feelsthevibes1662 6 ай бұрын

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

@Ancode2 2 ай бұрын

How simple and useful. Thank you very much for this

@NitinKumar-jc7bg 6 ай бұрын

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 6 ай бұрын

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 :)