In this exercise, we're going to be implementing a little theme system for this component you see on
the right hand side.
Now, in this example, there are a ton of different components have already been created for you.
So we've got to aptness component.
We've got a heading placeholder divider button segment and content.
You don't only have to worry about any of those components.
All those different components are showing different parts of this little card thing over here.
Each of these different components are wired up to make use of context in some way.
So, for example, this heading component, which is showing the summary text up here, or essentially
the header of the little card is wired up to take a look and try to find some kind of context if then
going to try to pull a value out of that context and use it to decide how to style itself.
Painting to the placeholder divider button and segment, they're all looking for some kind of context
and trying to pull a value out of it.
So in this example, I have already set up a lot of code for you, there's a lot of components already
been created.
There's already a theme context that's been created as well.
The only thing that you have to do is somehow communicate this information from that context down into
all these child components.
So all you really have to do is take this in context inside the app component and make sure that you
wrap a provider around all the inside of your after you get that provider in.
We then want to make sure that whenever a user clicks on this toggle theme button right here, we're
going to toggle the actual theme that is being displayed.
There's already some code inside the app component.
To flip the value of this theme piece of state, whenever a user clicks on that button, so all you
really have to do is take this this state theme value and pass it down into that context.
So overall, there's really just one or two lines of code you need to add to this example.
So even though it's a very small amount of code, you still have to read a lot of stuff as well to get
a really good idea of what's going on inside this little app.
So go ahead, take a look at this code, try to get a better idea of what's going on, and we'll take
a look at a solution in just a moment.