Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,030 --> 00:00:09,520
So back over in our code Ed let's actually open up our command line or your terminal and NPM start up
2
00:00:09,670 --> 00:00:13,330
our project inside of the project folder.
3
00:00:13,330 --> 00:00:21,210
Then we can get started making changes though here you see we're back up with our app bar and it just
4
00:00:21,210 --> 00:00:23,300
says the arc development up there.
5
00:00:23,340 --> 00:00:27,460
But what we're going to go ahead and change is this color.
6
00:00:27,630 --> 00:00:36,780
So going back to the code Ed if we head up into our theme dot J.S. file we can go ahead and open up
7
00:00:36,780 --> 00:00:44,070
this object that we had left empty in the first property that we're going to put in here is the palette
8
00:00:44,370 --> 00:00:51,770
which will then open up and then the first property in here that we're going to set is the common.
9
00:00:51,810 --> 00:00:59,820
So we're going to overwrite or actually just add some colors to that common collection and we'll do
10
00:00:59,820 --> 00:01:16,080
that by starting off with ARC blue and set that to the color 0 be 7 to be 9.
11
00:01:16,110 --> 00:01:28,230
So that's my arc blue and then we'll add an arc orange and we'll call that f f the A six zero.
12
00:01:28,860 --> 00:01:34,380
And you can see I've got a little plug in this shows the actual color there and gives a little preview
13
00:01:34,440 --> 00:01:35,730
which I really like.
14
00:01:35,820 --> 00:01:41,700
And now this saves the colors here so that any time throughout the application that we need to reference
15
00:01:41,700 --> 00:01:49,350
are blue or the orange we can just come and access it through the theme through this without having
16
00:01:49,350 --> 00:01:51,590
to copy this color anywhere else.
17
00:01:51,600 --> 00:01:57,150
So anytime we need to go and make changes that say if we wanted to try a different blue we just have
18
00:01:57,150 --> 00:02:03,680
to change the one entry here and then everywhere else that's going to be reflected.
19
00:02:03,690 --> 00:02:11,340
So now I actually want to go ahead and add these colors to our palette as well and get material UI to
20
00:02:11,370 --> 00:02:14,190
generate the light and dark versions.
21
00:02:14,190 --> 00:02:23,670
So we're going to add underneath the common object our primary object and that is going to contain the
22
00:02:23,730 --> 00:02:28,070
main which is that same blue color.
23
00:02:28,110 --> 00:02:35,820
So we could just copy that color again but since I actually want to make sure that it's a centralized
24
00:02:35,820 --> 00:02:42,720
and there's only one spot where we use that color let's actually go up here and create two variables
25
00:02:43,230 --> 00:02:50,840
or constants actually and call one are blue and set that equal to our color value
26
00:02:59,260 --> 00:03:09,280
and then another one called ARC orange and set that equal to that value.
27
00:03:09,300 --> 00:03:18,720
So now we can go ahead down here and let's actually just change these two blue and orange so that it
28
00:03:18,720 --> 00:03:24,660
will be easier in the future and then we'll need to change these to a template string.
29
00:03:24,720 --> 00:03:33,270
So use the back tick character and then the dollar sign parentheses to inject our javascript variable
30
00:03:33,510 --> 00:03:37,830
of ARC blue and then let's go ahead and do that same thing.
31
00:03:37,830 --> 00:03:41,350
Down here for Orange.
32
00:03:42,310 --> 00:03:50,980
And now of course in our palette we can go and use the same color and we will have it all centralized
33
00:03:51,040 --> 00:03:58,430
to the one variable still I'll go ahead and set the secondary as well to our orange color
34
00:04:04,370 --> 00:04:07,790
and make sure to use the back ticks not the regular quotes
35
00:04:11,090 --> 00:04:18,710
and now that we have these in place not only will material UI generate a light and dark variants of
36
00:04:18,710 --> 00:04:25,400
our main color that we have given to the primary and secondary options within our palette but it will
37
00:04:25,400 --> 00:04:33,800
actually then change all of the components that get their colors from the theme to use our main color
38
00:04:33,830 --> 00:04:42,830
that we've provided instead of the default material UI colors so if we save this file with our theme
39
00:04:42,870 --> 00:04:50,450
saved and remember that we had already set it up using our theme provider here so that now if we go
40
00:04:50,450 --> 00:04:58,010
back over to our browser window you'll see that we now have that blue color instead of the bluish purple
41
00:04:58,220 --> 00:05:00,380
that we had used before.
42
00:05:00,380 --> 00:05:08,510
So we have now officially styled our first material UI component and customized this app bar to the
43
00:05:08,540 --> 00:05:16,510
theme that we have provided with our own custom colors if we come over to the header file.
44
00:05:16,510 --> 00:05:25,270
Now we actually on our app bar component here we actually have a another default property as well of
45
00:05:25,330 --> 00:05:28,930
color that defaults to primary.
46
00:05:28,960 --> 00:05:39,100
And so when we say primary right here that tells material UI to look up the primary color from our theme
47
00:05:39,340 --> 00:05:43,810
which we have set the main two arc blue.
48
00:05:44,110 --> 00:05:50,830
So if we go back and we save our header file we can see in the browser that nothing has changed but
49
00:05:50,830 --> 00:05:59,170
if we go back and we change this to now secondary and we save the file we can go over and now we see
50
00:05:59,170 --> 00:06:00,810
the orange is there.
51
00:06:01,670 --> 00:06:08,000
So you can see how the theming system really does completely make over your entire application in a
52
00:06:08,000 --> 00:06:10,880
really easy to customize way.
53
00:06:10,940 --> 00:06:17,880
So let's go back and change that to our primary or we can actually just get rid of it entirely and it'll
54
00:06:17,900 --> 00:06:24,700
go back to the default with our blue background and our White text now that you've learned about the
55
00:06:24,700 --> 00:06:28,240
material UI palette system within their themes.
56
00:06:28,360 --> 00:06:35,020
We're going to go ahead in the next video and start taking a look at the typography section and how
57
00:06:35,020 --> 00:06:41,560
we can style all of the text throughout our application using material you eyes theming system.
6785
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.