1
00:00:00,990 --> 00:00:05,850
In this exercise, we're going to be implementing a little theme system for this component you see on

2
00:00:05,850 --> 00:00:06,630
the right hand side.

3
00:00:07,200 --> 00:00:11,160
Now, in this example, there are a ton of different components have already been created for you.

4
00:00:11,520 --> 00:00:13,370
So we've got to aptness component.

5
00:00:13,380 --> 00:00:16,830
We've got a heading placeholder divider button segment and content.

6
00:00:17,370 --> 00:00:19,350
You don't only have to worry about any of those components.

7
00:00:19,740 --> 00:00:23,680
All those different components are showing different parts of this little card thing over here.

8
00:00:24,390 --> 00:00:28,140
Each of these different components are wired up to make use of context in some way.

9
00:00:28,550 --> 00:00:33,390
So, for example, this heading component, which is showing the summary text up here, or essentially

10
00:00:33,390 --> 00:00:39,440
the header of the little card is wired up to take a look and try to find some kind of context if then

11
00:00:39,450 --> 00:00:43,500
going to try to pull a value out of that context and use it to decide how to style itself.

12
00:00:44,340 --> 00:00:49,920
Painting to the placeholder divider button and segment, they're all looking for some kind of context

13
00:00:49,920 --> 00:00:51,410
and trying to pull a value out of it.

14
00:00:52,420 --> 00:00:57,010
So in this example, I have already set up a lot of code for you, there's a lot of components already

15
00:00:57,010 --> 00:00:57,670
been created.

16
00:00:57,850 --> 00:01:00,780
There's already a theme context that's been created as well.

17
00:01:01,090 --> 00:01:07,120
The only thing that you have to do is somehow communicate this information from that context down into

18
00:01:07,120 --> 00:01:08,620
all these child components.

19
00:01:09,340 --> 00:01:15,040
So all you really have to do is take this in context inside the app component and make sure that you

20
00:01:15,040 --> 00:01:20,470
wrap a provider around all the inside of your after you get that provider in.

21
00:01:20,780 --> 00:01:25,420
We then want to make sure that whenever a user clicks on this toggle theme button right here, we're

22
00:01:25,420 --> 00:01:28,060
going to toggle the actual theme that is being displayed.

23
00:01:29,310 --> 00:01:31,380
There's already some code inside the app component.

24
00:01:32,490 --> 00:01:37,530
To flip the value of this theme piece of state, whenever a user clicks on that button, so all you

25
00:01:37,530 --> 00:01:43,200
really have to do is take this this state theme value and pass it down into that context.

26
00:01:44,040 --> 00:01:48,880
So overall, there's really just one or two lines of code you need to add to this example.

27
00:01:49,740 --> 00:01:54,540
So even though it's a very small amount of code, you still have to read a lot of stuff as well to get

28
00:01:54,540 --> 00:01:56,940
a really good idea of what's going on inside this little app.

29
00:01:57,600 --> 00:02:01,860
So go ahead, take a look at this code, try to get a better idea of what's going on, and we'll take

30
00:02:01,860 --> 00:02:03,500
a look at a solution in just a moment.