The Best Way to Handle Dark Mode with TailwindCSS

[@Alipakdamanyt]

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! 👏👏✨

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

[@piotrdarnowski5190]

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

[@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

[@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 😁

[@monisankarnath]

​@@tomisloadinggreat man share with us

[@francescoanastasio2021]

For those with access to Tailwind UI components, you can simply use the colors from the prebuilt components for both light and dark modes, and then proceed with the tutorial. This is particularly helpful for those who correctly point out that selecting the right colors can be the most challenging part. Here's another useful tip: if you have a specific color in light mode, such as `bg-gray-800`, there's a good chance that `bg-gray-200` works well in dark mode. Essentially, the formula is: dark_color = light_color - 800, and vice versa. Unless you have a much more custom palette, of course.

[@Thechanterramarie]

@@francescoanastasio2021thank you for this! 🙌

[@sofyanox12]

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

[@ohskynyrdlynyrd]

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

[@mohamedyamani8502]

Pretty cool man! Great video.

[@tomisloading]

Thank you!! 😁

[@quentinjames981]

Thanks for this great video, super helpful! One question - around 2:15, is there a reason why you defined background as rgba(var(--background))? It seems a bit redundant to me, unless I'm missing something.

[@ricardocnn]

Awesome approach!

[@feelsthevibes1662]

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

[@isaacgarcia2745]

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

[@bassam.2023]

Very useful. Thanks! 🎉

[@DMZT_dhruv]

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

[@joshuaheathcote2116]

Thank you Tom

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

[@excellend_boy]

thank you 🤩

[@sravanstg234]

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

[@tomisloading]

Andromeda!

[@sravanstg234]

@tomisloading thanks

[@madie2659]

Loved it thanks

[@tomisloading]

Happy i can help! :)

[@amirreza3638]

What about colors with intensity? Like blue-400 ?

[@yaronp16]

thanks you helped a lot!

[@tomisloading]

Happy I could help :)

[@whyyshivam]

So Good, that I wanna recreate this 🤧

[@FelipeOcampo-v4i]

You're a fucking legend.

[@tomisloading]

😎

[@raybelmo]

Cool!

[@Ancode2]

How simple and useful. Thank you very much for this

[@randomchannelqwert]

thanks

[@LulsegedAdmasu]

wow

[@СергейКр-щ4с]

I pressed like 11 times

[@the_protaku]

Your are a life savior 🥹🤩🥰