00:00 All right so we have a light mode and we have a dark mode and we're going to create another theme we'll call it citrus and this citrus theme is going to have light and dark mode as well. So in our app we're going to duplicate these two demo elements so we got four of them now

00:19 and these two are going to have we could add a class name of citrus but I think it's pretty cool to use a data theme data attribute which is more like explicit of saying hey I am a toggle for a theme anything works you can use any selector that you want but here data theme

00:38 equals citrus and here we're going to combine both citrus theme and the dark mode. So now we have four of our elements one two three four and the last two this one and this one we're going to give

00:51 a nice orangey lemony citrusy colors for the highlight and the accent colors. So in the Tailwind CSS file we have our root scope then we have our dark mode scope and we're going to do

01:06 exactly the same but we're only going to care of these two for simplicity I'll copy these and we are going to add a new data theme citrus here so brackets data dash theme equals citrus I'm going

01:22 to paste these values but reset the lightness to 50 for both and so I'm going to change the hue and that's the beauty about HSL is you can just change the hue and have colors that have similar

01:35 lightness and saturation and so 60 and 30 is a lime green and orangey which is going to feel perfectly citrusy so by just doing this the first two have the normal theme and then check this out

01:49 we have the citrus theme see this is why I was changing the lightness in the dark mode for these I feel like it works quite well if you change the lightness of this one to 30 this one to 70. Once again we're going to do exactly the same we're going to redefine that scope and combine it

02:09 with the dark selector and now here I can change this to 30 and this to 70 and we should have a pretty cool looking dark and light mode citrus theme so obviously we've just changed these colors

02:25 but you could go to town and change colors of the text change the border radius like do everything you want with the exact same approach and so one thing to note is when we have that selector with the data citrus and dark without space it means that both the data attribute and the dark

02:44 class need to be on the exact same element for things to work luckily for us this works here because we have both on the same level if you wanted to have the class dark on the HTML attribute and then add a data theme citrus further down the line you could not do this so make sure that if

03:03 you want this to be a bit more flexible and be able to combine things in more different scenarios you might want to add the same selector but with a space which means that the dark class can be a

03:14 child of the data theme citrus parent and maybe even add the inverse so have dot dark space citrus so you can have the dark class higher on the tree than the data citrus and with these three you are

03:29 able to completely mix and match add a leaf component just add dark mode for a specific leaf component and this is super super super powerful so i hope you enjoyed this play with this try to add the dark class or the citrus theme try to add three five two hundred thousand six hundred and

03:46 seventy nine themes with different colors and it's all going to work and it's pretty fun