Theming & Named Colors

[00:00:00]
>> Yes?
>> Wouldn't it be better to stick to primary and secondary colors instead of doing this?
>> Yeah, so that's a great question. And let's see, in the theme of off-roading a little bit, let's talk a little bit about that. So yes, so the question was, instead of saying blue or white, wouldn't I wanna say something like primary or secondary colors, or danger, or whatever, right?

[00:00:29]
Yes, I do those in our application so that I don't have to think about this, especially if I'm using it for multiple things. I can change the theme, so on and so forth. And you can compose those as well. The way that I would do it for the colors in particular is I would go and extend the theme.

[00:00:50]
So let's actually look at that. Let's say our primary color, Blue is too boring. We're gonna say our primary color today is gonna be purple, right? I want it to be purple. I can either create a bunch of those component classes, or I can go into this configuration, right?

[00:01:09]
And if you look, this is a JavaScript file. That usually lives in the root of your directory, typically tailwind.config.your choice of JS, TS, CJS, MJS. I think also MCTS and MTS which is, whatever. And this is an empty one. And there's a bunch of really cool things in here.

[00:01:36]
You can either extend the theme, which is, take whatever the default theme was and add more stuff to it, right? Or you can blow the theme away and just literally replace pieces of it with your own custom thing. If you wanna have colors like primary, secondary, danger, success, you can absolutely do that in here.

[00:01:57]
One of the designers I work with, comes with a set of shades of colors from 50 to 950, right? So 50, then 100, 200, 300, 400, 500, 600, 700, 800, 900 and 950, and I have designers that don't wanna work with that many colors. So you could cut it down to a smaller set of colors.

[00:02:15]
You could name the colors light, medium, and dark, all of that is possible. Nothing about the built-in theme and any of the semantics of it really are even something that you're totally stuck with. So in a theme of our day of kinda going with that question, if we wanted to have this idea of we want the colors but we also want primary, secondary, so on and so forth.

[00:02:41]
So I can extend the theme and I can say colors, and I have two options here, we'll do the easiest one first. Let's make a new color called primary, right? And I can define all of the various different shades from 50 to 950, and I will show you a easy way to generate a set of styles.

[00:03:05]
There's a bunch of ways to do this, I'm gonna show you just a quick website that's super great for this. Historically, I've also done it just in Figma, you can generate a full color palette and export the Figma color palette to Tailwind as well, that'll work. But let's say that we wanna have primary, and let's just actually say for now that we're gonna go with light, medium, dark, right?

[00:03:31]
We're not gonna do the whole set of colors, just to show you how flexible it is. So we'll say the primary has a light, and that's going to be, Who thinks I can guess a light purple hex code off the top of my head? Probably can't, and guess what?

[00:03:48]
I don't have to. But let's go ahead. I'm gonna put a color in here and we're gonna say, I think if I use high numbers, I should get, a high number is a lot of red and blue, should get me most of the way there, right? So we'll say CC00CC.

[00:04:06]
That's probably bright but it's not particularly light. So it's actually, that's dark. Let's just call this one dark. That's gonna be a dark color, yeah, ish, we'll find out. Apparently, live coding, okay, live hex code color guessing, not my strong suit, but it'll be okay. So now what we could do is say that this is gonna bg-primary, and I call that one dark.

[00:04:31]
And look, you can see we've got the autocomplete in there. That's barely a purple, it's a medium-ish purple at best, but I'm not actually stuck with that whole shade system. I could call this banana if I wanted to, right? I shouldn't because my teammates will hate me, but I could.

[00:04:52]
And so you can opt into, in no way, if there's any of the semantics of Tailwind you don't like, you're not opted into any of them, right? You can kind of just use it as effectively a build system for the way that you wish it was set up, and you're not stuck with anything.

[00:05:05]
And there's an escape hatch at all points, too, that I'll show you in about one second. So you can say dark. The other thing I can do in here is I can also say, Give it a default one. And now, I can literally just call bg-primary, right? So I can make the danger, success, so on and so forth, as well.

[00:05:34]
The other thing that you can do here, and, [SOUND] Hold on, that's probably too many braces. Now primary is, we want one more in there. Theme, return, primary, Cool, so now I have primary back. There's no default on that one, so I gotta change it in a second, but now it is all of the shades of purple.

[00:06:25]
So you can easily say that, okay, success is gonna be green, danger's gonna be red, warning's gonna be yellow, and you can grab those things. And if you then change what purple is, guess what? Primary also changes, right? So you can begin to compose the entire theme based on this.

[00:06:41]
So now I can go primary, and I can say 700, and that is a purple button, and it's the full range of shades of purple. And I could add additional, if I wanted a 750 in there, that's not the default theme, I can add it in there. If I wanted to put back a default in there as 500, I can also do that as well.

[00:07:00]
Let's just do it just for funsies. So we'll do that, and we'll say the default is theme.colors.purple, nope, purple.500. I think I got a JavaScript. Cool, so now I should be able to just actually go back to the bg-primary if I wanted to, right? And that's gonna be purple 500 at this point.

[00:07:28]
So everything is extensible, I can call the colors whatever I want, we'll actually just generate some colors later. We can make that our primary color that we go through, so on and so forth. So everything is super extensible, and you can, to answer that question, call the colors whatever you want, add a totally different color palette, make them a little bit more semantic.

[00:07:48]
I usually do that in almost all the apps that I'm building, so yeah.