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.