1
00:00:01,030 --> 00:00:07,360
All right, let's take a look at a solution so inside of the aptness file in context has already been

2
00:00:07,360 --> 00:00:07,930
imported.

3
00:00:08,350 --> 00:00:09,670
So I'm going to take that context.

4
00:00:09,820 --> 00:00:16,210
I'm going to access the provider property and then wrap all of the gist inside this render method with

5
00:00:16,210 --> 00:00:16,870
that provider.

6
00:00:17,050 --> 00:00:17,830
That's step one.

7
00:00:17,870 --> 00:00:18,960
Let's try that out right away.

8
00:00:20,340 --> 00:00:25,320
So around all the inside, if you're all put in a theme context dot provider.

9
00:00:31,740 --> 00:00:33,990
And then I'll just fix up the indentation a little bit.

10
00:00:36,060 --> 00:00:39,630
Next up, we've got the provider there, but we need to make sure that we actually communicate some

11
00:00:39,630 --> 00:00:44,760
value in this case, the value that we want to communicate down to all these child components is the

12
00:00:44,760 --> 00:00:47,760
current value of this state theme.

13
00:00:48,360 --> 00:00:50,580
That's going to be a string of either light or dark.

14
00:00:51,090 --> 00:00:55,470
And that little piece of information is going to tell all these different child components how they

15
00:00:55,470 --> 00:00:56,520
should style themselves.

16
00:00:57,580 --> 00:01:03,400
So to communicate that value down to all these child components through context, we will add on a value

17
00:01:03,400 --> 00:01:04,960
prop to the provider.

18
00:01:05,820 --> 00:01:09,870
And we'll give it a value of this, that state not being.

19
00:01:11,860 --> 00:01:14,870
So as soon as I do that, you'll notice that the card on the left hand side changed.

20
00:01:15,460 --> 00:01:20,920
That's because when we first create the app component, this team gets a default value of light.

21
00:01:21,400 --> 00:01:25,300
So we're trying to style all these child components right now with a light theme.

22
00:01:26,050 --> 00:01:31,630
If we now click on toggle theme, it's going to toggle the value of this state theme to dark and we'll

23
00:01:31,630 --> 00:01:36,490
see all these different components, update their styling appropriately as well so we can very easily

24
00:01:36,490 --> 00:01:37,330
go back and forth.

25
00:01:38,490 --> 00:01:39,840
All right, that looks pretty good.

26
00:01:40,720 --> 00:01:44,860
So, again, just a very small amount of code, but the real goal here was to really understand all

27
00:01:44,860 --> 00:01:48,370
the code was already inside this exercise and then make the appropriate updates.

28
00:01:48,920 --> 00:01:50,380
So hopefully you got the solution.

29
00:01:50,410 --> 00:01:51,420
Hopefully wasn't too bad.

30
00:01:52,150 --> 00:01:53,920
I'm going to check my solution very quickly.

31
00:01:55,100 --> 00:01:58,740
So, as usual, a couple of awkward seconds here and there we go.

32
00:01:58,890 --> 00:02:00,170
Looks like I got it correctly.

33
00:02:01,080 --> 00:02:03,410
OK, so let's take a pause here and continue in just a moment.