Check out a free preview of the full Intermediate Gatsby with Gatsby Themes course:
The "Theme UI Setup" Lesson is part of the full, Intermediate Gatsby with Gatsby Themes course featured in this preview video. Here's what you'd learn in this lesson:

Jason gives an overview of the third site to be built during this course, and explains that the UI needs to be improved by installing a theme.

Get Unlimited Access Now

Transcript from the "Theme UI Setup" Lesson

[00:00:00]
>> Jason Lengstorf: Let's dive in and and build this Negroni fan site, right? I'm really excited about this one. Negroni's my favorite drink. So they're a lot of fun. And I think building the site is also gonna be a lot of fun. So let's close up these windows and get into the Negroni site.

[00:00:21] So, in our Negroni site, we're gonna notice a couple things. So first out of the gate, we have a .environment file. So we're gonna get into some advanced stuff with environment variables. And also we're kind of starting from scratch here. So we've got the history is just some text.

[00:00:44] The index is just in text.
>> Jason Lengstorf: There is no layout components. So that's a typo on my part. Forgive me. So we've got our index file and our history file, which we're just wrapping in fragments. We've got some images that we're not using right now and then we've got some content that we're not using right now.

[00:01:06] So let's just take a look at what this where our starting point is. We'll do yarn workspace negronis develop. So now we've got this site built. And if I go back to our homepage, we have kind of a simple homepage, a little bit of text and then a link through to learn some history, a light history.

[00:01:32] But again there's no content. This is not a,
>> Jason Lengstorf: We need this to do a lot, right? So we need to install some themes. We'll do yarn workspace negronis add, and we're gonna add gatsby-plugin-theme-ui, and that needs to come along with theme-ui. It also needs to come along with @emotion/core and @mdx=js/react.

[00:02:02] And then because I don't wanna have to write that whole object, I'm just gonna include some @theme-ui/presets. So that we can start with a theme without having a right one ourselves.
>> Jason Lengstorf: In our config file to actually use this, let's set up modules.exports and we will set up plugins.

[00:02:27] We're just gonna use gatsby-plugin-theme-ui.
>> Speaker 2: Is this supposed to be module the experts?
>> Jason Lengstorf: Yes, it is. That is gonna be the death of me today. Thank you. So we've got module.exports and then we've got our plugins array. And to start we're just gonna use gatsby-plugin-theme-ui. I then want to set up a theme.

[00:02:54] So let's go in here, we'll do gatsby-plugin-theme-ui and we're gonna do an index file to override the theme. And then I'm gonna import the roboto theme. I'm gonna input it as theme so that we don't have to rename it below. And we're gonna import that from the theme-ui/presets.

[00:03:19]
>> Jason Lengstorf: And then I can export.default and just kinda drop the theme right in there.