Create and use a Theme in Styled Components
We will integrate a theme in our small app using styled-components and the ThemeProvider.
In the index.js file, where you have your App component being rendered, we will wrap it with the ThemeProvider. We can set some colors to an object and call it theme. We set that theme to be the theme prop inside of our ThemeProvider.
Now over in our App.js file, we can gain access to those colors stored in our theme by setting color: ${props => props.theme.colors.purple};. We can change any css in that theme object and get access to that wherever we want.
Sara Vieira: [0:01] Let's import ThemeProvider from styled-components, so import -- we import it like this because it's not the default export -- {ThemeProvider} from "styled-components".
[0:11] This is the component that we have to wrap our entire App with. I'm going to come over here and wrap our App with the ThemeProvider and close it like that.
[0:23] We're going to get an error because it says the "theme" prop is required. To use the ThemeProvider, we need to pass it a theme, and themes are just general JavaScript objects. I can say const theme = an empty object, and I can pass it in here, so theme={theme}.
[0:45] That's fine. That will work, but we have zero theme in it. I want to add some colors. I'm going to say colors, and I'm going to get the colors that I have in my clipboard, so like this.
[1:00] That's cool. Now, we have some colors that we can apply, but how do we apply this? If I go back to my App.js, I have a heading here, which says, "Hello Styled Components," and this has a font-family.
[1:09] Let's add some color to it. I'm going to say color, and I'm going to call in from the props which we can get from any style component, and I say props.theme.colors.purple. Now it's purple because we call this from the theme and the theme that is defined here.
[1:31] Let's say that I want to have other things in it. The reason that I added a color sub-object to the theme object is because you usually don't want just colors in your theme. Let's add the font as well. This is our body font. This will be used in all of the body. Let me delete this and just say serif for example, so that we can see the difference.
[1:51] I'm going to come here, and I'm going to create a new object, and I'm going to say that this is the fonts object, and it's going to have a body font. In the body font, I can just copy and paste this. Cool.
[2:06] Now we can also use this, so I can say props...Better yet, let's deconstruct the prop so I can come here, and I can say theme, and that will get just the theme from the props. In here, I can just say theme.fonts.body. This will use our body font. If I change it here and I just say serif is the first font and just update, you can see that now we have a serif font.
[2:31] This is how you can use themes with styled-components.