The Best Way to Handle Dark Mode with TailwindCSS

in tailent and more specifically dark mode in tailwind and more more specifically theming in general in Tailwind I have this beautiful little card here and the way to handle light and dark mode at least based on the first thing that you're going to see in the documentation is to use the dark colon class selector or thing but this kind of has some issues mainly just that you'll have to write double the class names everywhere and also that it kind of locks you into only having two themes like what if you want to have a bunch of themes for your users to pick from like on GitHub or something well that is exactly what we're going to be learning how to do today I'll be using react everything should apply just about the same for plain old HTML CSS and JavaScript though the first thing to note is that we can actually set our own colors in our Tailwind config file which we can then use directly in our classes under theme extend and colors we can then add whatever we want to call the color let's call this one grape and then any color we want I'll choose this one right here I've changed the button in our card to use this color and looks great everything is working as we would expect now we can't dynamically change the Tailwind config itself so this on its own doesn't really help us but what we can dynamically change is CSS variables I'll take my color here and I'll drop it into a CSS variable in the root of my CSS called grape I can then reference this variable directly where my color previously was in my config and this should just continue working as we would expected to now the only problem with this is that opacity will now not work and this is because Tailwind can't actually see like what kind of color it is so it can't inject the opacity value so quick change there we'll remove the rgba and the Pern from our variable leaving just the channel values then add that to our Tailwind config wrapping around the CSS variable which is now just passing in the channel values we should now see that opacity works as we would expect and the color looks as we would expect now that we understand how we can extract our colors to CSS variables let's just go and do it for all of them I'll go through my card and I'll take all of my colors out and put them all in their own variables and then add those to my config I try to use semantic names such as card and border so that it's easier to actually change for other themes of course also remember to update your class names to match and now that everything is moved over to my config it should all remain looking exactly the same the phun part though is that we can now change these colors to match different themes I'll start by moving all of these colors out of the rot selector into a class that I'm going to call light for light theme then I'll make another class called Dark which holds the same variables but for my dark mode version so just different colors I'm also going to make a third just for good measure which I'm going to call Red that also has its own values now I'm going to go to the body element of my project and I'm going to just add one of these classes to the class names there light mode should look exactly the same dark mode will now look like this and red will now look like this now you can go through and make as many themes as your heart desires this is how something like the daisy UI theme selector Works under the hood if you simply want a light and dark theme based on the user's operating system then you can kind of ignore a part of that last bit and instead just keep all of your variables in the root selector of your CSS then just change the variables based on a media query of prefers color scheme dark and your theme will switch automatically if you have many themes and you want to allow users to pick them then you're probably going to do something like this in your JavaScript so in react I'm doing this in a use effect first check to see if the theme class is set in local storage we're going to be storing which theme the user selected to local storage if it was simply apply that class to the class list of the documents body element else if the user's OS prefers dark mode you can use something like this to add your dark theme else just fall back to the basic light theme for example sake we'll just set the theme here and Bam works like a charm how you allow users to select the theme in your app is totally up to you but if you want a super cool dark mode toggle like this one or a whole collection of other cool animated UI components for react and tail one CSS head over to my website H.D first link in the description it's super fun I promise anyways going to go get some coffee now see you guys later peace

Channel: Tom Is Loading

Views: 9,485

Keywords:

Id: vIBKSmWAdIA

Length: 3min 49sec (229 seconds)

Published: Fri Nov 24 2023