Creating a Theme

[00:00:00]
>> We're gonna go create a theme. So we have our colors file, where we have blue, green, yellow, red. These ain't very semantic, they don't really tell us what is being used for what element or what piece of our UI. So that's where themes are really gonna come in.

[00:00:14]
So I'm gonna open themes.js, we're gonna create a theme. We're gonna just create a default theme, so export const defaultTheme, you can call it whatever you like. It's gonna be an object, and we're gonna throw some values in here. Before I do that, I'm just gonna import a couple of things that we just created.

[00:00:35]
So I'm gonna import my blue palette and my neutral palette. If your primary color is red, import red. If it's pink, import pink. And these are gonna come from our colors file. I'm also gonna import my primaryFont, I'm gonna wanna use that, so primaryFont, typography, okay? So what do I wanna add here?

[00:00:58]
Well, I wanna know what my primary color is. My primary color is gonna be my blue, my 300 value. Yours might be something different, but this is what mine's gonna look like. I'm also gonna want to kind of remember the hover color maybe and the active color. So let's do primaryColorHover.

[00:01:18]
Mine is gonna go lighter so I'm gonna do blue 200, go a shade lighter. On primaryColorActive, I'm gonna do the lightest color. Or this is the darkest color, mine go darker, mine go the other way, so it's gonna be blue 100. It's yelling at me cuz I'm using semicolons in an object.

[00:01:42]
Now I wanna know what textColor needs to be on top of my primaryColor. So if you have a very dark primaryColor, you're gonna want white, maybe, as your textColor. If you have a very light primaryColor, you're gonna want a very dark textColor. So textColorOnPrimary, mine is gonna be neutral 100, which is just a white.

[00:02:03]
For text color that's not on a primary if it's just on a background, textColor, I'm just gonna set it to neutral 600, which is a very deep gray. How about text that's on a very light background, I'm gonna want a dark color. So I'm gonna do textColorInverted, And this is gonna be neutral 100.

[00:02:28]
And then the last one is just my primaryFont. So, you could write like this, but because it's the same value for both, we can actually just shorten it. We can just write primaryFont, and it'll automatically assign the value as the same as the key. So that's our theme, again, you might have different variables, and that's totally fine.

[00:02:50]
The last thing that we're gonna do is, we've got these three JavaScript files in our utility folder, and that's totally fine. But let's do something to make that a little easier. Let's create a file called index.js, and we're just gonna export everything from these three files. So export * from ./colors, do export * from ./typography, and we'll do export * from ./themes.

[00:03:18]
Okay, why are we doing this? Does anyone know why we might wanna do this, over just importing and exporting the regular files? So if we didn't have this index file, what I would have to do is import primaryFont from, if I'm on my components folder, let's say, I'd have to go up a directory into utils, and go to typography.

[00:03:48]
And that's totally fine, you can do that. But it's a lot nicer if we could just import things from utils, isn't it? So I can import primaryFont, I can import blue, I can import defaultTheme, and I can do this all from utils. I don't have to go into color, I don't have to go into typography, so that's why we've done it this way.

[00:04:13]
So let's go use this, let's go use our theme. Let's go to buttons.js again. So right now, we have this hardcoded value. Let's use our theme instead, that sounds a lot better. So let's import that, import defaultTheme, again, this is going from utils. I'm also gonna want our typeScale, so I'm gonna add this to the same import, so typeScale, okay?

[00:04:43]
So that means we can get rid of this constant. We don't need this anymore, we're gonna use our theme. So I've set font-size here to 1rem, we can replace that now. So we can say default, wait, I'm sorry, typeScale, typeScale.paragraph. And anything that was using this primary blue, I'm gonna highlight it and press Cmd+D to highlight every single instance of that.

[00:05:07]
It's gonna be defaultTheme.primaryColor, okay? So we're replacing that constant we just got rid of with our defaultTheme primaryColor. So if I go back, everything still looks the same, which is really, really good. So we just got rid of our hardcoded values, and we used them from our theme inside of our styled component.