All right, let's take a look at a solution so inside of the aptness file in context has already been
imported.
So I'm going to take that context.
I'm going to access the provider property and then wrap all of the gist inside this render method with
that provider.
That's step one.
Let's try that out right away.
So around all the inside, if you're all put in a theme context dot provider.
And then I'll just fix up the indentation a little bit.
Next up, we've got the provider there, but we need to make sure that we actually communicate some
value in this case, the value that we want to communicate down to all these child components is the
current value of this state theme.
That's going to be a string of either light or dark.
And that little piece of information is going to tell all these different child components how they
should style themselves.
So to communicate that value down to all these child components through context, we will add on a value
prop to the provider.
And we'll give it a value of this, that state not being.
So as soon as I do that, you'll notice that the card on the left hand side changed.
That's because when we first create the app component, this team gets a default value of light.
So we're trying to style all these child components right now with a light theme.
If we now click on toggle theme, it's going to toggle the value of this state theme to dark and we'll
see all these different components, update their styling appropriately as well so we can very easily
go back and forth.
All right, that looks pretty good.
So, again, just a very small amount of code, but the real goal here was to really understand all
the code was already inside this exercise and then make the appropriate updates.
So hopefully you got the solution.
Hopefully wasn't too bad.
I'm going to check my solution very quickly.
So, as usual, a couple of awkward seconds here and there we go.
Looks like I got it correctly.
OK, so let's take a pause here and continue in just a moment.