Introduction to Next.js Adding Theme UI

[00:00:00]
>> Now let's just talk about my approach to styling in React applications. So, for what we're gonna use in this course and just my recommended approach, I like to use something called Theme UI. So if you've never heard a Theme UI, this will be a soft introduction into Theme UI.

[00:00:17] This is not a Theme UI course. I think it could literally be a course by itself, so I won't be going into every detail and nook and cranny about Theme UI, but I will be using it and you'll learn through examples. And I'll talk about it as we go.

[00:00:30] But this is actually how I prefer to style my React app. So if you were to click on a Theme UI website, which is really cool, which by the way, they do support Black Lives Matter, which is really dope. They got all the names on here, but if you click here and go to the documentation, which is also a really good documentation website.

[00:00:46] You can see here that it says Theme UI is a library for creating thinkable user interfaces based on constraint based design principles. What does that actually mean? We'll find out, but basically TLDR you can create an object representing a theme and then you can use that theme for all your components.

[00:01:05] That's basically it. And to me, it's a lot simpler for me to style using Theme UI than anything I've ever used. So that's what we're gonna be doing. So we are gonna add this to our app. So if you're using npm, you can npm install all the things here.

[00:01:20] There's really only two dependencies that we need. We need the actual Theme UI and then we need the @theme ui/presets, which is basically going to give us some default themes to start from. So we're not starting from scratch. You can think of it as the equivalent of like, I'm creating a brand new React app.

[00:01:37] I wanna import some Normalize.css. I wanna import Tailwind, just a CSS library, basically. This is the equivalent of that except for our CSS, our styles, are represented in JavaScript, which, that's how React does things. So what we'll do is we're going to create a theme and a file called theme.js.

[00:01:58] So what we can do is we can go to the root of our app, and we're gonna make a file called theme.js, like that. And we're gonna create a theme here. Luckily for you, already have everything you need. So you can just copy this theme and then I'll paste it and I'll talk about it a little bit.

[00:02:15] So, what's going on here with this? First thing is we have this preset here. And like I said, preset is just a starting point to our theme. A theme object, there's a Specific set of properties that should be on here and stuff like that. You can go look at the spec if you're interested on Theme UI.

[00:02:36] So there's a spec for a theme, like colors, sizes, font, different things like that. So I'm just using the Roboto one that I got from Theme UI, you can go check it out. Actually, I'll just show you what that looks like. So if I go to the documentation, I can go to packages, and then I can go to presets.

[00:02:54] I'll make this a little bigger. And then I can click on Roboto. Some I'm using this preset. It comes with these colors by default. Here's the text. Here's the background. Here's the primary, secondary, muted, highlight, gray, accent, darken. All this stuff. Here's the fonts. Here's the font scale.

[00:03:09] It's got all this stuff ready to go. Literally fonts, everything ready to go. I don't have to do anything. I just install it and I'm done, right? So I'm using this preset. You can pick any preset or none if you want to. And I'm just going to extend over that and then I'm going to just add my own properties here.

[00:03:26] So the thing about Theme UI is it's like making components almost, right? So just like you can make custom components whereas I might make a card component or I might make a page component, and then those components will have these styles. I'm doing the same thing here. You could think of these as like CSS components.

[00:03:44] I'm making the components in just CSS. So I make a CSS component called card and CSS component called page. And I can add these, what they call variants, these are actually called variants, I can add these variants to any component that I want inside of my React app.

[00:04:00] I guess another way you could think of it is like these are just CSS classes, right? You could think of this as like containers-card or containers-page. That's a CSS class. And that's basically what I'm doing here. And you could put whatever CSS property you want here. The other really cool thing is that you can refer to predefined values.

[00:04:20] So muted is not a color that's in a browser, but I'm able to use it here because I know Roboto defines a color called muted. And I'm able to refer to that here. So you can actually put theme values in here as well. So not just CSS values, but theme values, which is where the power comes from.

[00:04:36] And this is a lot to take in, but you'll see in a minute. And then styles, this is just for global style. So this will basically allow us to style things that are global. For instance, if you were doing Markdown or MDX or something like that, this will just apply the styles to that.

[00:04:50] So, really cool. So if you really wanna see what's popping here, you just log this. So I think it's better we just log this. So I'm just gonna log this theme and then the next thing is we need to actually add this theme to our site. Oops, why did I do that?

[00:05:04] The way to do that is we need a provider. So Theme UI comes up with a provider to wrap our entire document. So there's two ways we can use providers in Next.js, that brings us to this point, is you could, because if you think about every page in Next.js is its own app.

[00:05:27] I didn't really talk about this, but you get code splitting for free based off routing, right? Again, if you've ever configured Webpack that's not something you can easily do. You really got to understand a lot about the build systems and performance and all the different features and plugins out there and trade offs and environments that you're running in.

[00:05:45] You get this for free with Next.js. You get that nice code splitting. So you can think of every single page as its own application. So in that case, yeah, we could just add a provider around every single page. I could just go into every single page and wrap every single one of these in a theme provider but that's kind of annoying.

[00:06:01] And I only have a couple pages. If I had more pages, it would just be so annoying. I wouldn't want to do that. So, where's one place where I can do this? Well, in the app. The app is the route. It takes every single page, which is this, and it returns it, right, with a prop.

[00:06:18] So this is the perfect place to add things like providers and stuff like that. So that's exactly what we're gonna do. We're gonna import the theme provider and we're going to wrap our entire application. So let's do that. So I'm gonna say import from Theme UI. And what I want is a theme provider, like that.

[00:06:37] And I'm just going to cut that right quick and then I'm going to add the theme provider, like this. And I was gonna put that back in there. And then the only thing that the provider takes that we really care about is gonna be a theme. And guess what?

[00:06:51] We just made a theme. It's right here on the routes called theme.js. It's the thing that we're exporting here. We can just import it here. So we'll just import this theme From Where is it at? Where am I at? Source. There we go. Theme, and we'll just paste them or we'll just type in theme there.

[00:07:19] So now we have our theme. We have our theme provider, it's gonna wrap every single page. If we go look at our App now, Hold up. Something break? Nope, nothing broke. Hold up. Theme provider theme. Okay. If we look at our app now, we should be able to see, you know I think I got to, yeah, there we go.

[00:07:47] I was about to say something. Let me rebuild this. Let me rebuild this. Okay. There we go. Okay. So, if we rebuild as you'll see instantly, it just looks better [LAUGH]. The fonts got changed. Yeah, we still need some spacing and stuff and we're gonna get to that next.

[00:08:12] But I mean, you can see the font got changed, the color, the text changed a little bit. Everything just got instantly applied here. And if we look at this object that we're logging, which is our theme, we can actually see what is on this object. So like I said, there's colors.

[00:08:24] So you can see some predefined colors here. You see the background is this, muted is that, primary is this, secondary is that. It's pretty simple. Here's even a text and just to show you the power of this, if I were to go to my theme, and let's say I wanted to change the colors right quick.

[00:08:41] I could say colors, I'm just gonna take whatever Roboto had there for their colors, I'm gonna spread over that and then I'm going to change the background to be yellow. That's kinda nasty. So if we do that now the background's yellow. Right? Very easy, very simple. I didn't even touch any component.

[00:09:05] I didn't do anything. It just happened automatically. All I did was just touch this object, which was super simple, right? And if you think about it, because this is just JavaScript, what's really cool about this is, let's say for instance, you wanted to test the theme, the way your site looks, if your entire site, every single component used properties on this theme, testing how your site looks could be as simple as just testing this object.

[00:09:28] Does this object equal this object? You can do a snapshot test on this object to see if it equals what it was before to make sure your site always looks the same, right? There's something that you can do there. So it gets really powerful. And obviously, you can see the power when it comes to extensibility.

[00:09:41] You can extend themes and do all types of stuff like that. But yeah, very powerful. Actually, that looks really good yellow. Kinda reminds me of Kill Bill, so that was really nice. Okay, that strangely worked out. I thought that was gonna be ugly, but it was actually really dope.

[00:09:56] So yeah, that's Theme UI. You can see other things like font sizes and font weights. It also handles responsive design very well. I'm not gonna to get into that but honestly, it's the best use of responsive, like the best mechanism to handle responsive design that I've ever seen in my entire life.

[00:10:14] I think they do it so well that I don't dread it anymore. So, really dope there. Highly recommend checking out Theme UI. But enough about that. Let's make our app look pretty, cuz right now it kinda just looks gross and it doesn't really do anything. So I have all of that stuff ready for copy and paste down here.

[00:10:35] So because it is a lot of stuff, I'm just going to copy it. So the first thing is we actually are going to create a navigation component. So, go to your components folder and make a nav.jsx and then paste this stuff in it. There we go. All right, so we're gonna make a nav.jsx here.

[00:10:57] And I'm just gonna paste that in here. Okay.