Theme your application with styled-components and "ThemeProvider"

[00:00] We are importing three react components styled with style components. Notice that these components share the same UI color, currently hard-coded in each components. Let's improve that, and use style components theme provider. We'll import theme provider from style components alongside our existing inject global here.

[00:20] Let's define a theme object, and we'll have a primary property where we'll setup brand color. To make these theme properties available everywhere, we'll rap our root component inside the theme provider. Now, we can pass our theme object in a theme property, so we can access it in children style components.

[00:39] Let's update the quote component. Instead of the hard-coded X value, we'll reach out for the theme in props.theme, which is this theme property here, which return this object, and will return the primary color. Let's copy that and update the other instance of the color. We can also update our notice component and our button.

[01:05] Great. We now have all our components pulling the brand color from the same one place in our theme object. Let's change the value of the primary color to something else, and viola everything updates accordingly.