All language subtitles for 10. Styling - Themes (Palette)

So back over in our code Ed let's actually open up our command line or your terminal and NPM start up

our project inside of the project folder.

Then we can get started making changes though here you see we're back up with our app bar and it just

says the arc development up there.

But what we're going to go ahead and change is this color.

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

this object that we had left empty in the first property that we're going to put in here is the palette

which will then open up and then the first property in here that we're going to set is the common.

So we're going to overwrite or actually just add some colors to that common collection and we'll do

that by starting off with ARC blue and set that to the color 0 be 7 to be 9.

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.

And you can see I've got a little plug in this shows the actual color there and gives a little preview

which I really like.

And now this saves the colors here so that any time throughout the application that we need to reference

are blue or the orange we can just come and access it through the theme through this without having

to copy this color anywhere else.

So anytime we need to go and make changes that say if we wanted to try a different blue we just have

to change the one entry here and then everywhere else that's going to be reflected.

So now I actually want to go ahead and add these colors to our palette as well and get material UI to

generate the light and dark versions.

So we're going to add underneath the common object our primary object and that is going to contain the

main which is that same blue color.

So we could just copy that color again but since I actually want to make sure that it's a centralized

and there's only one spot where we use that color let's actually go up here and create two variables

or constants actually and call one are blue and set that equal to our color value

and then another one called ARC orange and set that equal to that value.

So now we can go ahead down here and let's actually just change these two blue and orange so that it

will be easier in the future and then we'll need to change these to a template string.

So use the back tick character and then the dollar sign parentheses to inject our javascript variable

of ARC blue and then let's go ahead and do that same thing.

Down here for Orange.

And now of course in our palette we can go and use the same color and we will have it all centralized

to the one variable still I'll go ahead and set the secondary as well to our orange color

and make sure to use the back ticks not the regular quotes

and now that we have these in place not only will material UI generate a light and dark variants of

our main color that we have given to the primary and secondary options within our palette but it will

actually then change all of the components that get their colors from the theme to use our main color

that we've provided instead of the default material UI colors so if we save this file with our theme

saved and remember that we had already set it up using our theme provider here so that now if we go

back over to our browser window you'll see that we now have that blue color instead of the bluish purple

that we had used before.

So we have now officially styled our first material UI component and customized this app bar to the

theme that we have provided with our own custom colors if we come over to the header file.

Now we actually on our app bar component here we actually have a another default property as well of

color that defaults to primary.

And so when we say primary right here that tells material UI to look up the primary color from our theme

which we have set the main two arc blue.

So if we go back and we save our header file we can see in the browser that nothing has changed but

if we go back and we change this to now secondary and we save the file we can go over and now we see

the orange is there.

So you can see how the theming system really does completely make over your entire application in a

really easy to customize way.

So let's go back and change that to our primary or we can actually just get rid of it entirely and it'll

go back to the default with our blue background and our White text now that you've learned about the

material UI palette system within their themes.

We're going to go ahead in the next video and start taking a look at the typography section and how

we can style all of the text throughout our application using material you eyes theming system.